react+redux工作流程

上图：

可见整个redux流程的逻辑非常清晰，数据流是单向循环的，就像一个生产的流水线：
store（存放状态） -> container（显示状态） -> reducer （处理动作）-> store

这一点对精细化分工协作很有好处。

我们来看看这三个概念：

store 是应用的状态管理中心，保存着是应用的状态（state），当收到状态的更新时，会触发视觉组件进行更新。
container 是视觉组件的容器，负责把传入的状态变量渲染成视觉组件，在浏览器显示出来。
reducer 是动作(action)的处理中心， 负责处理各种动作并产生新的状态（state），返回给store。
NOTE：从对象的包含关系上讲，reducer 是store的一部分，但在逻辑上我们把它分出来，这样会比较容易理解整个redux流程。

我们可以做个形象的比喻，把 js 比喻成巴士，把 store, container, reducer 比喻为三个车站，再把 state 和 action 比喻成两种乘客。这是一趟环路巴士：

js巴士 从 store车站 出发，载上 state乘客 ，state乘客 到达某个 container车站 下车并把自己展示出来
过了一会，有一个 action乘客 上车了，js巴士 把 action乘客 送到 reducer车站，在这里 action乘客 和 state乘客 生了一个孩子 new state，js巴士把 new state 送回了 store车站（好像是人生轮回）

redux 只是定义了应用的数据流程，只解决了 “数据层”（model layer） 的问题，一般还会使用 react， angular 等作为“显示层” （UI layer） 来一起使用。