react+redux

•  React 的单向数据流性质，如果子组件需要更新父组件的状态，父组件就要传一个回调函数给它。这咋看起来没有什么大不了的，然而如果你的组件要更新 root 组件的状态，你就不得不将 “this.props.updateCallback” 沿着数据流一层一层传递下来。

•  Flux，它是一种规范化单向数据流的架构思想。它由四个主要元素构成。

  • Store: 负责存储数据和应用状态。

  • Action: 触发状态改变。

  • Dispatcher: 管理 action 并将它们导向对应的 store。

  • View: 展现 store 中的数据，派发 action – 这块是 React 中已有的。

  采用 Flux，我们就不用将状态保存在 root 组件中，然后将 update 回调一层层传递给它的子组件。React 组件通过 store 直接获得数据，通过调用 action 来改变状态：这样简单、优雅，不会让你抓狂。Flux 补充了可预测的行为和一些标准到被 React 框架约束的代码中。

• 编写组件

  把页面需要呈现的UI划分为不同的组件，然后依次用react改写之前的html页面中jquery插件和各个UI部分。

• 组织state结构

  state其实是最容易但是确实最难理解的一部分，state可以看做是一个虚拟的树结构，它并不像一个实体对象，需要事先全部声明有哪些类型有哪些字段，而是在你编写组件以及action和reducer过程中会动态根据你的定义而改变，当然你自己得清楚你的state整个结构 并且最好是以一个json的格式写下来，在重构的过程中不断的修改和完善。

• action

  action相对容易理解，我把它比作一个 好的函数名(坏的函数名:abc(){} ) 类似 getElementByID("id")，为什么不是函数，而是函数名字，因为 action只做了函数名该做的事情，只描述给我们听:如果调用该action 会发生生么。这里告诉我们即将会发生的就是 根据id获取该元素。

• reducer

  如果说action的功能是函数名，那reducer就是实际操作者了，所以reducer就是函数的实现步骤。因此，state的状态在这里进行改变，要注意的是，并不是用我们所理解的“重新赋值”来改变state，而是根据你需要的功能重新生成一个state，把新的state返回出来。这里涉及到一个纯净函数pure function的思想，我们只要知道在reducer里面不要进行修改赋值，这样的话state永远要么是之前的状态要么是新的状态，而不会有修改错误的状态了。

• store

  之前讲的都比较容易懂，那什么是store?
  store就是联系action和reducer的东西，我们可以通过传入写好的reducer来创建一个store， 然后我们通过store来执行需要执行的action，因此他们之间就联系在了一起，而此时你根本不需要去管view该如何渲染，因为在使用react编写ui组件的时候已经把组件和state联系在了一起。所以redux的流程就是：

  使用通过reducer创建出来的Store发起一个Action，reducer会执行相应的更新state的方法，每当state更新之后，view会根据state做出相应的变化!

  注意：再次强调一下 Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时，你应该使用 reducer 组合而不是创建多个 store。

引自 

cowkeys