三大原則

Redux 可以被描述成三大基礎(chǔ)原則：

單一數(shù)據(jù)源

整個(gè)應(yīng)用的 state 被儲(chǔ)存在一棵 object tree 中，它只有一個(gè)單一的 store 。

這讓同構(gòu)應(yīng)用開發(fā)變得非常容易。來自服務(wù)端的 state 可以輕而易舉地被序列化并融合到?jīng)]有額外代碼影響的客戶端上。由于是單一的 state tree ，調(diào)試也變得非常容易。你也可以把應(yīng)用的 state 保存下來加快開發(fā)速度。此外，受益于單一的 state tree ，以前難以實(shí)現(xiàn)的像“撤銷/重做”這類的功能也變得輕而易舉。

console.log(store.getState());

{
  visibilityFilter: 'SHOW_ALL',
  todos: [{
    text: 'Consider using Redux',
    completed: true,
  }, {
    text: 'Keep all state in a single tree',
    completed: false
  }]
}

State 是只讀的

惟一改變 state 的辦法就是觸發(fā) action，action 是一個(gè)描述要發(fā)生什么的對(duì)象。

這讓視圖和網(wǎng)絡(luò)請(qǐng)求不能直接修改 state，相反只能表達(dá)出需要修改的意圖。因?yàn)樗械男薷亩急患谢幚?，且?yán)格按照順序一個(gè)接一個(gè)執(zhí)行，因此沒有模棱兩可的情況需要提防。 Action 就是普通對(duì)象而已，因此它們可以被日志打印、序列化、儲(chǔ)存、后期調(diào)試或測(cè)試時(shí)回放出來。

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
});

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
});

純函數(shù)的形式來執(zhí)行修改

為了描述 action 如何改變 state tree ，你需要編寫 reducers。

Reducer 只是一些純函數(shù)，它接收之前的 state 和 action，并返回新的 state。剛開始你可以只有一個(gè) reducer，隨著應(yīng)用變大，你可以把它拆成多個(gè)小的 reducers，分別獨(dú)立地操作 state tree 的不同部分，因?yàn)?reducer 只是普通函數(shù)，你可以控制它們被調(diào)用的順序，傳入附加數(shù)據(jù)，甚至編寫可復(fù)用的 reducer 來做一些通用任務(wù)，如分頁器。

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
  case 'SET_VISIBILITY_FILTER':
    return action.filter;
  default:
    return state;
  }
}

function todos(state = [], action) {
  switch (action.type) {
  case 'ADD_TODO':
    return [...state, {
      text: action.text,
      completed: false
    }];
  case 'COMPLETE_TODO':
    return [
      ...state.slice(0, action.index),
      Object.assign({}, state[action.index], {
        completed: true
      }),
      ...state.slice(action.index + 1)
    ]
  default:
    return state;
  }
}

import { combineReducers, createStore } from 'redux';
let reducer = combineReducers({ visibilityFilter, todos });
let store = createStore(reducer);

就是這樣，現(xiàn)在你已經(jīng)明白 Redux 是怎么回事了。