redux

store Store就是保存数据的地方，可以看成是一个容器，整个应用只有一个store

store

    import { createStore } from 'redux';
    const store = createStore(fn);

state

    import { createStore } from 'redux';
    const store = createStore(fn);
    const state = store.getState();

一个state对应一个view，只要state相同，view就相同

action

  const action = {
      type: 'ADD_TODO',
      payload: 'Learn Redux'
  };

action就是view发出的通知，表示state应该要发生变化了
Action描述当前发生的事情。改变State的唯一办法，使用Action，它会传递数据到Store

Action Creator

  const ADD_TODO = '添加 TODO';

    function addTodo(text) {
      return {
        type: ADD_TODO,
        text
      }
    }

  const action = addTodo('Learn Redux');

store.dispatch() 是 view发出Action唯一的办法

    import { createStore } from 'redux';
    const store = createStore(fn);

    store.dispatch({
            type: 'ADD_TODO',
            payload: 'Learn Redux'
    });

reducer

  const reducer = function (state, action) {
  // ...
        return new_state;
  };

Store收到Action以后，必须给出一个新的State,这样View才发生变化，这种State的计算过程就叫做Reducer，Reducer是一个函数，它接受Action和当前State作为参数，返回一个新的State

    const defaultState = 0;
    const reducer = (state = defaultState, action) => {
           switch (action.type) {
          case 'ADD':
                return state + action.payload;
          default: 
              return state;
            }
    };

    const state = reducer(1, {
          type: 'ADD',
          payload: 2
      });

实际应用中，Reducer 函数不用像上面这样手动调用，store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。

Reducer是纯函数，对于同一个state，必定得到的同样的view，所以Reducer函数不能改变state

store.subscribe()

    import { createStore } from 'redux';
    const store = createStore(reducer);

    store.subscribe(listener);

Reducer可以拆分

    const chatReducer = (state = defaultState, action = {}) => {
        const { type, payload } = action;
        switch (type) {
            case ADD_CHAT:
                return Object.assign({}, state, {
                    chatLog: state.chatLog.concat(payload)
              });

           case CHANGE_STATUS:
                  return Object.assign({}, state, {
                        statusMessage: payload
            });

        case CHANGE_USERNAME:
              return Object.assign({}, state, {
              userName: payload
        });
      default: return state;
       }
  };

可以拆分为

    const chatReducer = (state = defaultState, action = {}) => {
        return {
            chatLog: chatLog(state.chatLog, action),
            statusMessage: statusMessage(state.statusMessage, action),
            userName: userName(state.userName, action)
        }
    };

Redux 提供了一个combineReducers方法，用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，将它们合成一个大的 Reducer。

      import { combineReducers } from 'redux';

            const chatReducer = combineReducers({
                  chatLog,
                  statusMessage,
                  userName
            })

      export default todoApp;

流程

用户发出Action

    store.dispatch(action);

然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。

    let nextState = todoApp(previousState, action);

State 一旦有变化，Store 就会调用监听函数。

    // 设置监听函数
    store.subscribe(listener);

listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。

  function listerner() {
        let newState = store.getState();
        component.setState(newState);   
    }

中间件