Redux

Redux

React组件工作模式 把state 转换成DOM的结构

Redux是把组件的状态都放在了外边Store中，Store负责提供整个应用中心不同的状态。 store也是tree的结构。解决跨组件通信的问题。

Redux特性： Single Source of Truth

• 特性1 Single Source of Truth

  • 传统的MVC 多个View对应多个Modal。由于业务，Modal和View之间的关系错综复杂。

  • 所有数据都放在Store中存储，View内部尽量不去定义状态。多个View只与Store进行交互。

• 特性2 可预测性（redux的状态是非常稳定的）

  • state + action = new State （state发生变化，一定是由某个action触发的，触发之后会产生一个新的state 而不是在原来的state上做修改。）

• 特性3 纯函数更新store(输出结果完全取决于输入参数)

    function todos(state = [], action) {
      switch (action.type) {
        case ADD_TODO:
          return [...state, {
            text: action.text,
            completed: false
          }];default:
          return state;
      }
    }

理解Redux

    const store = createStore(reducer)

store的三个方法

• 1 getState() 获得当前的数据
• 2 dispatch(action） (如 用户点击了view上的button 产生了一个action，store可以把它dispatch给reducer)
• 3 subscribe(listener)（监听store的变化,当监听到可以执行callback的会调）

理解action

• 一个action描述的是一个行为的 动作和描述
• action是通过store dispatch出来的

    {
        type:ADD_TODO,
        text:'this is add todo' //行为描述
    }

理解reducer

reducer 是一个函数 接收state(之前的状态，如果没有之前的状态他会接收一个initialState) 和 action。 reducer可以接收到所有的action，能否执行是通过action.type来进行判断

    function todoApp(state = initialState,action){
        switch(action.type){
            return Object.assign({
                {},state,{
                    todo:[
                        ...state.todos,
                        {
                            text:action.text,
                            completed:false
                        }
                    ]
                }
            })
        }
    }