Redux学习笔记

一.Redux是什么？

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

二.设计思想

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

三.基本原则

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

四.工作流程

1. 首先，用户发出action。

     store.dispatch(Actions.increment(this.props.caption));
   

   其中Actions.increment返回一个action对象，具体的派发工作在view中完成。

2. 然后，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
     }
   }
   

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

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

4. 在监听函数中，可以通过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只负责计算状态，不负责存储状态。