Flutter redux 使用与理解

Flutter 状态管理redux 方案理解与实践

redux 数据管理方式来自 react ，React 的数据单向流通的，很多时候需要共享数据的时候就比较麻烦，需要不断地变量提升，也就导致数据上溯会非常的混乱。解决办法之一就是redux , 进行全局统一的数据管理，并且通过State 的更新驱动虚拟dom 更新，再经过diff 算法结果驱动真实dom 的更新。优势是数据的结构清晰,各个组件之间的数据共享。但是真的是挺繁琐的，初学者也不方便理解。

1.这是redux 数据流程图，与一些关键组件。

一些基本概念的梳理：

Store：这是数据存储仓库，保存所有的数据。其实在 react 里面是可以有多个 store 的，我并没有研究         flutter 里面是否可以存在多个，但是正常来讲一个已经足够了。并且建议一个应用只配置一个Store 。

Action:  本质就是一个个操作，因为redux 是不允许直接操作 Store 里面的state 的，Action 就相当于一个的操作Store 请求，。

reducer: 这是一个真真修改Store 里面State 的纯函数。只有两个参数 一个是当前的State ,另一个是Action

Middleware: 中间件，主要是用来发起异步Action的，一般在这发起API  请求，log 调试。 常用库redux_thunk

Redux 接入实践：

   在接入redux 时，我们需要接入一些其他的库更方便的使用redux ，如：flutter-redux，redux_thunk等。

 flutter-redux 具备除了redux的所有能力之外，针对UI层专门提供了StoreProvider、StoreConnector、StoreBuilder等相应的操作组件，这大大简化了我们在flutter中使用redux的成本。redux_thunk 可以让我们像发起普通Action一样去发起 异步Action.后面我们会介绍 这些关键Widget 的作用。

Step1 创建一个全局的Store 并接入到App 中，创建 Store 时 middleware 参数需要注意一下，当我们引入redux_thunk 这在数组中直接 加入thunkMiddleware 就好了。 StoreProvider 是flutter_redux 提供的UI widget ，包裹MaterialApp根组件，在程序入口绑定好创建的全局的store 。

step1

Step2 创建并初始化一个全局的State 用来保存全局的数据。Store 创建的时候就传入了一个 AppState 的泛型。以后存取数据都需要用到这个State 实体。

Step2_图1

step2_图2

Step3 创建Action ,比如我需要调用查询单词的接口，这是一个异步的Action  ，我们就需要用到Middleware 了。那么我们先创建一个 Middleware。ThunkAction 类型是一个 Store 参数的异步函数，我们要传递参数只能像如图调用。第一ThunkAction 是真正API 请求，第二 ThunkAction 是一个测试。redux_thunk 会自己把ThunkAction 放入到中间件，我们只需要当普通Action 调用就行了。Step3_图2 就是定义的普通的Action

Step3_图1

Step3_图2

Step4  发起Action , 去执行 reducer , ThunkAction 与普通action 执行时一样的，都是dispatch 一个action 出去。不过在发起 Action 前 我们需要先 connect 一下，把当前组件跟Store 绑定起来。StoreConnector 组件就是用来关联Store 与当前组件，当Store 发生改变的时候，接受 新的 State 。OnInit  内可以执行初始化操作， converter 方法转换成 viewMode, builder 两个参数，一个是组件的上下文，一个是State 在这边把state 转化成UI 。var store = StoreProvider.of(context);用来获取 当前组件绑定的Store 。其实 一般来讲全局就一个store 对象，可以 保存在全局配置中，也就不需要每次用的时候都获取了。

Step4_图1

Step4_图2

Step5 创建 Reducer ，reducer 是纯函数，只有两个参数 :当前的的State 和 执行的action ，并根据action 来修改State .在这里不应该做其他的操作。这个没有 react  {...state} 解包方式，我这边没有仔细写，读者可以根据需要在 MineState 中写一个 方法，可以优雅的操作state.

Step5

Step6 使用Store State。在connector 中就已经可以拿到Store 对象，我们就可以愉快的使用Store State 

Step6

总结：Redux  是挺繁琐的，但是基本结构整理清晰后，后面的套路都一样的，一些基础结构搭建好，再经过打磨后，用起来还是很方便的。不过初学者要好好整理一下redux 的数据流向，弄清楚一些 flutter_redux 的基础组件的作用。

写了一个demo 供大家参考一下：github 地址