React 栈（二）：Redux

[EthanLin-TWer]

为什么是 redux？

• 前面做了 TodoMVC 就会发现，除了纯数据，更多的还有用户交互
• 说白了，纯 React 需要传入很多回调函数来实现父子组件的交互，组件多了就很烦了
• Redux 做的就是在 React 之上再提供一层状态管理 -> predictable states & management

而，双向绑定，很难提供这样可预测的状态，因为没有 single source of truth。应用 application 和 用户 view/event 都可以修改数据，这样很难达到单一数据源的维护，可预测的数据确定性自然就没有了。

Redux 的解决方案，就是在用户与应用中间加了一个中间层：状态。这样用户 触发事件 -> 事件 修改数据，就只有单一的数据修改源了。看神图。

数据操作放在 reducer，业务操作放 actions。有待回去学习体会。

什么是 Redux

Redux 是为了解决上面的问题而生的。因此，我们自然需要知道，Redux 是 如何解决这个问题的。

为了解耦行为发生 -> 状态改变这两个事情，Redux 将行为抽象为一个 Action，将状态改变抽象为一个 Reducer。Reducer 的作用就是，根据 action 的类型不同，操作相应的数据，这样就把数据的改变集中到了一个地方，也就是 reducer 里面。那么很自然的，reducer 要根据 action 的不同决定是否响应，就需要你去把 reducer 注册到某个 action 下。另外，Redux 提供了一个 Store 来统一存储所有的 action，这样，store 就成了 reducer 监听的 single source of truth，收到 action 时，store 会负责通知关注了该 action 的 reducer，让 reducer 做出响应。

• https://github.com/erikras/ducks-modular-redux/blob/master/README.md
• https://jaysoo.ca/2016/02/28/organizing-redux-application/
• https://zhuanlan.zhihu.com/p/21490605
• https://github.com/redux-saga/redux-saga
• https://github.com/redux-loop/redux-loop

最好的资料 from @JimmyLv

• https://learnredux.com/
• Learning-Redux 着重数据结构设计与数据流，处理异步请求 JimmyLv/jimmylv.github.io#16

最好的教程 from Redux Creator

• https://egghead.io/courses/getting-started-with-redux
• https://egghead.io/courses/building-react-applications-with-idiomatic-redux