关于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