store Store就是保存數(shù)據(jù)的地方，可以看成是一個(gè)容器，整個(gè)應(yīng)用只有一個(gè)store

store

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

state

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

一個(gè)state對(duì)應(yīng)一個(gè)view，只要state相同，view就相同

action

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

action就是view發(fā)出的通知，表示state應(yīng)該要發(fā)生變化了
Action描述當(dāng)前發(fā)生的事情。改變State的唯一辦法，使用Action，它會(huì)傳遞數(shù)據(jù)到Store

Action Creator

  const ADD_TODO = '添加 TODO';

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

  const action = addTodo('Learn Redux');

store.dispatch() 是 view發(fā)出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以后，必須給出一個(gè)新的State,這樣View才發(fā)生變化，這種State的計(jì)算過(guò)程就叫做Reducer，Reducer是一個(gè)函數(shù)，它接受Action和當(dāng)前State作為參數(shù)，返回一個(gè)新的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
      });

實(shí)際應(yīng)用中，Reducer 函數(shù)不用像上面這樣手動(dòng)調(diào)用，store.dispatch方法會(huì)觸發(fā) Reducer 的自動(dòng)執(zhí)行。為此，Store 需要知道 Reducer 函數(shù)，做法就是在生成 Store 的時(shí)候，將 Reducer 傳入createStore方法。

Reducer是純函數(shù)，對(duì)于同一個(gè)state，必定得到的同樣的view，所以Reducer函數(shù)不能改變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 提供了一個(gè)combineReducers方法，用于 Reducer 的拆分。你只要定義各個(gè)子 Reducer 函數(shù)，然后用這個(gè)方法，將它們合成一個(gè)大的 Reducer。

      import { combineReducers } from 'redux';

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

      export default todoApp;

流程

用戶發(fā)出Action

    store.dispatch(action);

然后，Store 自動(dòng)調(diào)用 Reducer，并且傳入兩個(gè)參數(shù)：當(dāng)前 State 和收到的 Action。 Reducer 會(huì)返回新的 State 。

    let nextState = todoApp(previousState, action);

State 一旦有變化，Store 就會(huì)調(diào)用監(jiān)聽函數(shù)。

    // 設(shè)置監(jiān)聽函數(shù)
    store.subscribe(listener);

listener可以通過(guò)store.getState()得到當(dāng)前狀態(tài)。如果使用的是 React，這時(shí)可以觸發(fā)重新渲染 View。

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

中間件