Flutter 状态管理之Redux

       Flutter 中一切皆组件（Widget），二组件中又有无状态的StatelessWidget和有状态的StatefulWidget两种；今天我们就来说一说StatefulWidget中的State的状态管理。一般我们有两种方式对state进行管理，一种是自己管理，一种是交给父组件管理。

• 自己管理：也就是组件自身通过setState来管理状态，通过手动触发setState来进行UI的改变；
• 父组件管理：组件本身是一个无状态的StatelessWidget，但是其父组件式StatefulWidget，父组件状态变化时或手动触发子组件的回调来达到子组件的更新。

   更详细的介绍与代码演示请参考：https://www.jianshu.com/p/767036bd9ecc

       这种通过setState的方式来更新组件，在一些功能简单的项目中是非常方便的，但随着我们的项目业务功能不断壮大，UI、组件不断的增加，这个时候使用setState来进行状态管理就显得力不从心了；随之而来的还有一个令人非常头疼的问题，那就是你的代码中各种setState会让你不知所措，维护成本大大增加。

        面对以上简单粗暴的方式给我们编码带来的各种问题，业界大牛也是不遗余力为我们推出了各种方便的状态管理库，google官方推荐的是flutter-redux，类似的还有bloc，fish-redux等等。我们今天就重点来看一下flutter-redux的简单实用，关于其他几个库网上也是有大量的文档可以参考。

何为Redux

redux是一个单项数据流框架，尤其在前端应用非常成熟，比如React、vue等都有对应redux的实现，Redux主要由下面几个部分组成。

• Store：在redux中我们所有的状态都会放入Store中，这个store会放在APP的顶层，一般是在APP的启动界面中；
• action：可以理解为意图，我们需要改变状态的时候，通过发送一个action来触发对应的reducer进行state的改变；
• reducer：真正进行state的修改，必须为一个纯函数，reducer接受到一个action后，根据action生成一个新的state放入store中；
• middleware：是store的中间件，它可以弥补reducer不能处理异步的缺点，middleware是在发出action之后，reducer处理之前执行的，所以我们可以在此处处理一些异步数据，比如从网络上加载数据等；

flutter-redux

flutter-redux是基于redux在flutter上的实现，flutter-redux处理具备redux的所有能力之外，针对UI层专门提供了StoreProvider、StoreConnector、StoreBuilder等相应的操作组件，这大大简化了我们在flutter中使用redux的成本。

1、引入flutter-redux，添加依赖

开发工具中找到pubspec.yaml文件，引入flutter-redux，目前pub上最新的版本为：0.5.3,

 

 更详细的添加步骤请参考pub：https://pub.dev/packages/flutter_redux

2、创建State

刚才上面说过，我们的状态都保存在Store中，是有reducer生成并存储到store中的，每次store更新状态的时候并不是修改原来的state，而是生成一个新的state替换掉老的state，所以我们的sate应该是只读的，使用@immutable注解。

3、 创建action

action是一个动作，意图，类似Android原生中的Intent。最简单的方式定义一个枚举类型代表各种action，reducer接受到action后通过遍历枚举中的action来确认执行对应的reducer函数，这也是最常规的用法；我今天推荐大家的方法是把action定义为一个类，这个类中有一个属性（就是对应的具体的state数据），当然也可以是个空类；这样的好处是我再触发action的地方可以动态的传入数据，用起来更加的灵活。

4、创建reducer

上面文章开始说过，reducer是一个纯函数，接受一个action，返回一个新的state来替换store中老的state。这里我有两个reducer函数，处理两种不同action下的state，参数group在这里可有可无，我的数据实际上是在发出action的时候传入的，所以新的state是从action中获取到的数据直接更新的state。

5、Reducer与action关联

大家注意到，我这里使用的action不是一个枚举，而是一个类。我的state也不是一个单一类型的数据，是一个类。我把APP中所有需要state管理的数据统统都定义到这个类中，作为类的属性存在，对外暴露的State其实只有一种类型，那就是 APPState类。那既然store初始化的时候我们只有一个APPState类型的state，处理具体数据的actionb改怎么样和被APPState管理的数据关联对应呢？我们这里就使用 Redux的combineReducers函数和TypedReducer类来解决这个问题，具体看代码。

这里我有两个reducer，分别是处理用户数据的UserReducer和处理微群的MicroGroupReducer；每个reducer中定义了不同action对应的reducer处理函数。最后我们把这两个reducer统一返回交给Store。

6、初始化Store

Store有一个必须参数reducer，其他可选参数有State，Middleware等，我们想用Redux管理全局的状态的话，需要将store储存在应用的入口才行。而在应用打开时要先初始化一次应用的状态。所以在State中添加一个初始化的函数。

Store初始化好之后需要将其放入APP顶层，这里Redux提供了StoreProvider组件，我们使用此组件将我们的MaterialApp根组件包裹即可。

 

7、在子页面中使用Store中的state

获取store我们需要使用StoreConnector<S,ViewModel>。StoreConnector能够通过StoreProvider找到顶层的store。而且能够在state发生变化时rebuilt Widget，当然也可以使用StoreBuilder。

8、发出action

发出了action，并通知reducer生成新的状态，这里我再本界面的一个点击事件中发出获取数据的action，对应的列表数据会随之自动更新。

9、Middleware使用

Middleware是一个中间件，在Store初始化的时候可以初始化多个Middleware，他的执行时机是发出action之后，reducer函数之前，所以这里我把真正从服务器获取数据的逻辑放到了一个Middleware中，等Middleware处理完毕之后，在发出一个action来更新state数据。

定义好middleware之后，只需要在初始化Store的时候添加进去即可。

关于Middleware的执行流程这里就不在详细赘述了，推荐一遍文章大家自行学习：https://www.jianshu.com/p/d788f420bb27

以上就是flutter-redux的简单实用，更高级的用法后续会陆续推出。

Java-jvm的运行时数据区（RuntimeDataArea）：https://mp.csdn.net/postedit/92414856

Python学习-numpy矩阵库1：https://mp.csdn.net/postedit/92168264

Python学习-numpy矩阵库2：https://mp.csdn.net/postedit/92173333

Python学习-numpy高级函数之where和extract函数：https://mp.csdn.net/postedit/92153655

Python学习-numpy高级函数之sort-argmax-argmin函数：https://mp.csdn.net/postedit/92141246