摘要：就是應(yīng)用程序領(lǐng)域的狀態(tài)，它是類型中的模型的設(shè)計(jì)的概念，這設(shè)計(jì)是由架構(gòu)而來的，在原本的架構(gòu)中是允許多個(gè)的結(jié)構(gòu)，簡化為只有單一個(gè)。的設(shè)計(jì)中是與中的相比，它們之間有一些類似的設(shè)計(jì)。

Redux里的強(qiáng)硬規(guī)則與設(shè)計(jì)不少，大部份都會與FP(函數(shù)式程序開發(fā))、改進(jìn)原本的Flux架構(gòu)設(shè)計(jì)有關(guān)。Redux官網(wǎng)文檔上的三大基本原則，主要是因?yàn)橛锌赡芘鲁鯇W(xué)者不理解Redux中的一些限制或設(shè)計(jì)，所以先寫出來說明，這里面也說明了Redux的設(shè)計(jì)原理基礎(chǔ)是如何，所以強(qiáng)烈建議所有的初學(xué)者一定要徹底地理解這三大原則中的意義，多看幾遍，對日后的學(xué)習(xí)會很有幫助。以下分別說明，主要以原文的標(biāo)題與內(nèi)容說明，盡可以說明的比較清楚些。

你的整個(gè)應(yīng)用中的state(狀態(tài))，會存儲在單一個(gè)store(存儲)之中的一個(gè)對象樹狀結(jié)構(gòu)里。

Redux中只有用單一個(gè)對象大樹結(jié)構(gòu)來的存儲整個(gè)應(yīng)用的狀態(tài)，也就是整個(gè)應(yīng)用中會用到的數(shù)據(jù)，稱之為store(存儲)。但要注意的是store(存儲)并不是只有單純的數(shù)據(jù)而已。store就是應(yīng)用程序領(lǐng)域的狀態(tài)，它是類型MVC中的Model(模型的)設(shè)計(jì)的概念，這設(shè)計(jì)是由Flux架構(gòu)而來的，在原本的Flux架構(gòu)中是允許多個(gè)store的結(jié)構(gòu)，Redux簡化為只有單一個(gè)。

Redux的單一個(gè)store的設(shè)計(jì)有一些好處，對開發(fā)者來說，它可以容易調(diào)試與觀察狀態(tài)的變化，狀態(tài)存儲于對象樹狀結(jié)構(gòu)中，也很容易作到重作/復(fù)原(Undo/Redo)的功能。因?yàn)橹挥幸粋€(gè)store，但如果store里要儲放多個(gè)不同的狀態(tài)對象，以及每次的更動數(shù)據(jù)，自然就會變成了對象樹狀結(jié)構(gòu)(object tree)。

此外，如果你想要從store中取出目前的狀態(tài)數(shù)據(jù)，可以用store的getState()方法。

唯一能更動狀態(tài)的是發(fā)送一個(gè)action(動作)，action是一個(gè)描述"發(fā)生了什么事"的純對象

這里指的"狀態(tài)"，是上面說的儲放在store中的狀態(tài)數(shù)據(jù)，你"不能直接"對其中的狀態(tài)數(shù)據(jù)更動，只能"間接"地作這事。這與原先的React中的state與setState的概念有點(diǎn)像，Redux的意思是你不能直接更動store里面所記錄的狀態(tài)值，只能"間接"地透過發(fā)送action對象來叫store更動狀態(tài)。"間接"地更動狀態(tài)是一個(gè)很關(guān)鍵的設(shè)計(jì)，這是Flux中單向數(shù)據(jù)流的重點(diǎn)之一，這對于每個(gè)動作發(fā)生，最終會影響到什么狀態(tài)上的更動，一個(gè)接一個(gè)的順序等等的一種嚴(yán)格的設(shè)計(jì)。

你可能會認(rèn)為"狀態(tài)既然是唯讀"，直接與間接有什么差異，"唯讀"不就代表完全不能更動，這語句是不是有誤？

"唯讀"當(dāng)然就是完全不能更動的意思沒錯(cuò)，所以狀態(tài)對象的更動是并不是在原先的狀態(tài)對象上變動它，而是由原先狀態(tài)對象因?yàn)閯幼鞯募尤牒螅a(chǎn)生一個(gè)全新的狀態(tài)對象，用這全新的狀態(tài)對象來取代原先的狀態(tài)對象而已。這在真實(shí)世界中或許很難拿比喻來說明，但在軟體世界中這很可以很容易達(dá)成。

"發(fā)生了什么事"這句，是代表每個(gè)action都會有一個(gè)type(類型)，代表這個(gè)動作是要作什么用的，或是現(xiàn)在是發(fā)生了什么，例如是要新建一筆什么數(shù)據(jù)，或是刪除整個(gè)數(shù)據(jù)等等，動作對象除了要說明它是要作什么之外，也需要包含所影響的數(shù)據(jù)。

發(fā)送一個(gè)action(動作)，使用的是store.dispatch(action)語法樣式，下面這個(gè)例子就是一個(gè)要更動狀態(tài)的代碼:

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

中間的那個(gè)純對象，就叫作action(動作)，它是一個(gè)單純用于描述發(fā)生了什么事與相關(guān)數(shù)據(jù)的純對象:

{
  type: "COMPLETE_TODO",
  index: 1
}

還記得我們在React中的state與setState方法的設(shè)計(jì)嗎？state也是不能直接更動的，一定要透過setState方法才能更動它。那這是為什么呢？因?yàn)?b>setState不光只是更動state值，它還要作重新渲染的動作，React需要比對目前的狀態(tài)，與即將要變動的狀態(tài)，這樣才能進(jìn)移動新渲染的工作。Redux的設(shè)計(jì)中store是與React中的state相比，它們之間有一些類似的設(shè)計(jì)。

要指示狀態(tài)樹要如何依actions(動作)來作改變，你需要撰寫純粹的歸納函數(shù)(reducers)

Redux中的reducer的原型會長得像下面這樣，你可以把它當(dāng)作就是 之前的狀態(tài) + 動作 = 新的狀態(tài) 的公式:

(previousState, action) => newState

注: 你可以參考Redux中Reducers這一章的內(nèi)容，里面有實(shí)例。

不過，Redux中的reducer一定是純函數(shù)(pure function)，也就是不能有副作用的函數(shù)。因此由reducer所產(chǎn)生的新狀態(tài)，并不是直接修改之前的狀態(tài)而來，而是一個(gè)復(fù)制之前狀態(tài)，然后加上動作改變的部份，產(chǎn)生的一個(gè)新的對象，它這樣設(shè)計(jì)是有原因的。

Redux的store設(shè)計(jì)，并不是原本Flux架構(gòu)中的store，而是ReduceStore，這個(gè)ReduceStore是一個(gè)在Flux中的store進(jìn)化版本，在說明中它有一個(gè)叫作reduce的方法，說明如下:

reduce(state: T, action: Object): T 歸納(Reduces)目前的state(狀態(tài))與一個(gè)action(動作)到新的store中的state(狀態(tài))。所有的子類都需要實(shí)作這個(gè)方法。這個(gè)方法必須是純粹而是無副作用。

那為何要用這個(gè)進(jìn)化的ReduceStore？它最后有說明一段:

不需要發(fā)送更動事件注意所有繼承自ReduceStore的store，不需要手動發(fā)送在reduce()中的更動事件...state(狀態(tài))會自動地比對在每個(gè)dispatch(發(fā)送)之前與之后，與自動地作發(fā)送更動事件...

ReduceStore的設(shè)計(jì)與Redux最一開始的版本差不多是同時(shí)間發(fā)布的，在開發(fā)者之間彼此有交流。Redux的store運(yùn)用了類似于ReduceStore的設(shè)計(jì)，所以要更動Redux中的store，需要透過reducer，這是為了簡化原本在Flux數(shù)據(jù)流的實(shí)作流程。

reducer在Redux中扮演了十分重要的關(guān)鍵角色，它是一種對store中所存放的狀態(tài)，要如何因應(yīng)不同的動作而進(jìn)行刷新的函數(shù)，而store也是由reducer所創(chuàng)建，例如像下面的代碼:

// @Reducer
//
// action payload = action.text
// 使用純粹函數(shù)的數(shù)組unshift，不能有副作用
// state(狀態(tài))一開始的值是空數(shù)組`state=[]`
function todoApp(state = [], action) {
  switch (action.type) {
    case "ADD_ITEM":
      return [action.text, ...state]
    default:
      return state
  }
}

// @Store
//
// 由reducer創(chuàng)建store
const store = createStore(todoApp)

針對應(yīng)用中不同功能的狀態(tài)，可以分別寫出不同的reducer，Redux中提供了combineReducers函數(shù)可以合并多個(gè)reducer，例如以下的代碼:

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

function counter(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1
    case "DECREMENT":
      return state - 1
    default:
      return state
  }
}

// rootReducer是個(gè)組合過的函數(shù)，
// 這里用的是對象屬性初始設(shè)置簡寫法，
// combineReducers傳參是一個(gè)對象
const rootReducer = combineReducers({
  todos,
  counter
})