React學習心得之Redux

在React的使用過程中，經常會碰到元件間傳值和共享狀态的問題。

這個時候為了友善管理和使用，我們會引進狀态管理器，其中有一種就是redux。

Redux 是 JavaScript 狀态容器，提供可預測化的狀态管理。

可以讓你建構一緻化的應用，運作于不同的環境（用戶端、伺服器、原生應用），并且易于測試。Redux 和 React 之間沒有關系。

Redux 支援 React、Angular、Ember、jQuery 甚至純 JavaScript。

Redux 無依賴。

Redux 可以用這三個基本原則來描述： 1、單一資料源。

整個應用的 state 被儲存在一棵 object tree 中，并且這個 object tree 隻存在于唯一一個 store 中。

2、State 是隻讀的。

唯一改變 state 的方法就是觸發 action，action 是一個用于描述已發生事件的普通對象。

3、使用純函數來執行修改。

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

即Redux有三大概念，

Action，Reducer和Store。

Action本質上是jacascript的普通對象，通過store.dispatch()方法來觸發定義的action，這是唯一改變state的方法。

如：

Reducer 是什麼呢，Reducer 是用來處理資料邏輯的，具體就是根據 Action 處理 State 的函數。

Action并沒有指出如何處理資料，那麼更新state就是reducer要做的事情了。

在編寫reducer的過程中，有兩個問題。

1、怎樣設計 state 的資料結構？ 2、有了 state 結構，怎麼編寫 reducer？

在 Redux 應用中，所有的 state 都被儲存在一個單一對象中。

通常，這個 state 樹還需要存放其它一些資料。我們應該盡可能将其分離開。

根據 State 結構編寫 reducer時，redux 提供 combineReducers() 函數來調用我們編寫的一系列 reducer。

每個 reducer 根據它們的 key 來篩選出 state 中的一部分資料并處理。

然後這個生成的函數所所有 reducer 的結果合并成一個大的對象。

如： Store是什麼？

action 用來描述“發生了什麼”, reducers 會根據 action 更新 state。

Store 就是把它們聯系到一起的對象，是用來維持應用的 state 的。

store有四個方法。

getState： 擷取應用目前 state。

subscribe：添加監聽器。

dispatch：分發 action。更新 state。

replaceReducer：替換 store 目前用來處理 state 的 reducer。

常用的是dispatch，這是修改State的唯一途徑，使用起來也非常簡單。

簡單來說，Redux 應用隻有一個單一的 store。

當需要拆分處理資料的邏輯時，使用 reducer 組合，而不是建立多個 store。

combineReducers是用來合并reducer的，因為creatstore隻能有一個reducer，但是一個reducer又隻對應一個狀态。

單個reducer是一個純函數，定義了初始狀态和action，必須給初始狀态指派，必須有傳回值。