flux 和 redux Link to heading
说到 react-redux 就绕不开 flux 和 redux 模式. 他们有很多相同, 也有不同. 现在我们来回顾一下什么是 flux, 什么是 redux.
flux Link to heading
可以看到 flux 的精髓即数据永远单向流动.
Redux Link to heading
redux 借鉴了很多 flux 里的概念, 只是略有不同. redux 也是一种模式的设计.
| Flux | Redux |
|---|---|
| 多个 store | 一个 store |
| dispatcher对 store 进行修改 | 没有 dispatcher这个概念. 它使用 reducer 进行事件的处理. reducer 是纯函数. |
看完了 flux 和 redux, 大概有个数, 就是大概这棵组件树就应该像下面这么画了.
react-redux 之 createStore Link to heading
我们说过 redux 只有一个 store, 呐, 这个就是创建这个 store 的 func 了.
在这之前, 我们需要明确 context 是什么, 我们先叉出来讲讲 context.
context Link to heading
context 是个 reactjs 的概念.
React.js 的 context 就是这么一个东西，某个组件只要往自己的 context 里面放了某些状态，这个组件之下的 所有子组件 都直接访问这个状态而不需要通过中间组件的传递。一个组件的 context 只有它的子组件能够访问，它的父组件是不能访问到的，你可以理解每个组件的 context 就是瀑布的源头，只能往下流不能往上飞。
btw, reactjs 在某个版本之后出了一个新的 context api, 还没有时间看, 据说可以在简单情况下取代 redux. 这个以后再说.
总的来说, 就我个人理解, context 就是把当前子节点的状态拿到一个地方, 这个子节点的孩子节点都可以访问这个状态, 避免了子节点一层一层往下传递 props
这样看起来没什么问题, 很好啊, 方便. 但是, context 打破了数据单向流动的规律, 增加了组件之间的耦合.
说完了 context, 我们回头来接着说这个 createStore.
context 对于所有孩子节点都是可见的, 也就是说谁都可以修改, 那么它就很危险了. 那可怎么办? 我们就需要一个东西专门处理修改 context 的这个行为, 这个东西就是 reducer. 实际上 reducer 可能就是一个函数.
reducer 在加上 state 就构成了 store 的主要结构. 也就是说代码上 store 不光存储 context, 它也管发起的 action. 但是模式上我们还是要把 store 和 reducer 分开. 但是我们是没有办法通过 store 来和 components 进行互动的, 如果有的话, 那就和 context 的本质没有差别了.
react-redux 之 Provider Link to heading
If we want to link our React application with the redux store, we first have to let our app know that this store exists. … It serves just one purpose : to “provide” the store to its child components.
provider 的作用就是喂数据的 节点.
有了数据源头, 有了 component, 我们就需要他们互动起来, 于是就需要下面这些
connect & mapStateToProps & mapDispatchToProps Link to heading
connect 是个高阶的component. 它的作用是 消除大量重复逻辑 和 消除耦合.
说到high order component, 它又叫做pure/dumb component, 和 pure function 一样, 不产生副作用, 结果可以预测.
connect 就是把 Dumb 组件和 context 连接（connect）起来了 which uses connect to map the stores state and dispatch to the props of a component
dumb 组件对应 a component, context 对应 state and dispatch.
下面的图也许可以肤浅的解释一下 connect 的作用.
mapStateToProps, mapDispatchToProps -> connect <- one of components
注意, connect 只能连接 provider 下面的 components.