Redux

Redux的特色

1. 統一的狀態管理，一個應用中只有一個倉庫（store）
2. 倉庫中管理了一個狀態樹（statetree）
3. 倉庫不能直接修改，修改只能經過派發器（dispatch）派發一個動做（action）
4. 更新state的邏輯封裝到reducer中

Redux能作什麼？

隨着JavaScript單頁應用開發日趨複雜，管理不斷變化的state很是困難，Redux的出現就是爲了解決state裏的數據問題。在React中，數據在組件中是單向流動的，數據從一個方向父組件流向子組件(經過props)，因爲這個特徵，兩個非父子關係的組件（或者稱做兄弟組件）之間的通訊就比較麻煩

 

redux.png

redux中各對象的說明

store

store是一個數據倉庫，一個應用中store是惟一的，它裏面封裝了state狀態，當用戶想訪問state的時候，只能經過store.getState來取得state對象，而取得的對象是一個store的快照，這樣就把store對象保護起來。

action

action描述了一個更新state的動做，它是一個對象，其中type屬性是必須有的，它指定了某動做和要修改的值：

{type: UPDATE_TITLE_COLOR, payload: 'green'} 

actionCreator

若是每次派發動做時都寫上長長的action對象不是很方便，而actionCreator就是建立action對象的一個方法，調用這個方法就能返回一個action對象，用於簡化代碼。

dispatch

dispatch是一個方法，它用於派發一個動做action，這是惟一的一個可以修改state的方法，它內部會調用reducer來調用不一樣的邏輯基於舊的state來更新出一個新的state。

reducer

reducer是更新state的核心，它裏面封裝了更新state的邏輯，reducer由外界提供（封裝業務邏輯，在createStore時傳入），並傳入舊state對象和action，將新值更新到舊的state對象上返回。

使用redux的流程

1. 定義動做類型：

const INCREAMENT='INCREAMENT'; 

2. 定義項目的默認狀態，傳入reducer

let initState={...}; function reducer(state=initState,action){ //... } 

3. 編寫reducer，實現更新state的具體邏輯

function reducer(state=initState,action){ let newState; switch(action.type){ //... } return newState; } 

4. 建立容器，傳入reducer

let store=createStore(reducer); 

5. 訂閱須要的方法，當state改變會自動更新

store.subcribe(function(){}); 

6. 在須要更新state的地方調用dispatch便可

store.dispatch(/*某個action*/); 

能夠看到經過以上幾個步驟，就可使用redux，且不侷限於某種「框架」中，redux是一個設計思想，只要符合你的需求就可使用redux。

在React中使用Redux

如下編寫一個待辦事項的小功能，描述以下：

• 可讓用戶添加待辦事項（todo）
• 能夠統計出還有多少項沒有完成
• 用戶能夠勾選某todo置爲已完成
• 可篩選查看條件（顯示所有、顯示已完成、顯示未完成）