关于Redux 的数据流的介绍

节选翻译 a cartoon intro to redux

关于Redux 的数据流的介绍

1. 初始化store ,root component 创建 store, 并用 createStore 方法告诉 store 使用那个 root reducer. 这个root reducer 下面已经有多个子reducer. root reducer使用 combineReducer() 来集成子reducer 到 rootReducer 里面.

2. 建立 store 和 components 之间的通信. root component 把传入的 provider 传入的 component 包装成自己的 subcomponent, 并且建立store 和 provider 之间的联系.
   Provider 创建了更新component的网络, 那些 smart component 通过connect()接入网络，确保组件state可以及时更新

3. 准备 action 的回调, 这个让一些dumb components 更好的和action工作, smart components 可以使用bindActionCreator() 新建 action 的 callbacks.
   这种方式只需要传递一下callback 到dump Components, action 就将自动分发当它整理好后.

当应用初始化完成后, 用户就可以与之进行交互, 下面将演示用户触发一个action后的数据流程

1. 视图获取到action. action creator 将其格式化返回.

2. action 要么自动分发(如果bindActionCreators() 在setup中使用到), 要么view 分发该action

3. store 将获取到action, 并将当前的 state tree 和 action 传递给root reducer

4. root reducer 把 state tree 砍开多个slice, 并把每个 slice 传递到相应的 subreducer

5. subreducer 复制一份相同的slice 并在该副本上做出修改, 并返回该处理完的副本到root reducer

6. 当所有的subreducer 返回 它们的slice copies , root reducer 把所有的slices 重新整理成一个新的 state 对象.

7. store 通知 它绑定的view layer 更新 state的变化

8. 绑定的view layer 通知store 返回新的state 对象

9. view layer 触发 rerender