Redux学习笔记 - 爱码网

一.Redux是什么？

redux跟flux一样，也是一个数据管理框架，它是以flux框架的理念为基础，更优雅的实现数据流的管理。

二.设计思想

web应用是一个状态机，视图和状态是一一对应的。
所有的状态，保存在一个对象里面。

三.基本原则

唯一数据源，也就是说整个应用只有一个store。
保持状态只读，不能直接去修改store的状态，要想修改，必须通过派发action。
数据改变只能通过纯函数(reducer)完成。

四.工作流程

Redux学习笔记

首先，用户发出action。
```
  store.dispatch(Actions.increment(this.props.caption));
```
其中Actions.increment返回一个action对象，具体的派发工作在view中完成。

然后，store自动调用reducer，并且传入两个参数：当前的state和接收到的action。然后，reducer会根据这个action，更新state。但是，要注意，这里reducer只是返回一个新的state给store，具体的更新工作由store自身完成。

// reducer函数

export default (state, action) => {
    const {counterCaption} = action;

    switch (action.type) {
      case ActionTypes.INCREMENT:
       // 在这只是返回一个新的state，具体的更新工作，还是由store完成。
         return {...state, [counterCaption]: state[counterCaption] + 1};
      case ActionTypes.DECREMENT:
         return {...state, [counterCaption]: state[counterCaption] - 1};
      default:
         return state
  }
}

state一旦有变化，store就会调用监听函数

componentDidMount() {
   store.subscribe(this.onChange);
}

在监听函数中，可以通过store.getState()得到当前状态，然后再通过store.setState()设置新状态，从而驱动组件的重新渲染。

// 监听函数
onChange() {
  this.setState(this.getOwnState());
}

// 获取store数据
getOwnState() {
  return {
    value: store.getState()[this.props.caption]
 };
}

五.总结

store 收到 action 以后，必须给出一个新的 state，这样 view 才会发生变化。这种 state 的计算过程就叫做 reducer。并且，reducer只负责计算状态，不负责存储状态。