Redux 是 JavaScript 狀態(tài)容器响迂，提供可預(yù)測(cè)化的狀態(tài)管理考抄。
- action 是純聲明式的數(shù)據(jù)結(jié)構(gòu)，只提供事件的所有要素蔗彤，不提供邏輯川梅。
- reducer 是一個(gè)匹配函數(shù)疯兼，action 的發(fā)送是全局的：所有的 reducer 都可以捕捉到并匹配與自己相關(guān)與否，相關(guān)則拿走 action 中的要素進(jìn)行邏輯處理挑势，修改 store 中的狀態(tài)镇防，不相關(guān)則不對(duì) state 進(jìn)行處理并原樣返回啦鸣。
- store 負(fù)責(zé)存儲(chǔ)狀態(tài)并可以被 react api 回調(diào)潮饱，發(fā)布 action。
要點(diǎn)：
- 應(yīng)用中所有的 state 都以一個(gè)對(duì)象樹(shù)的形式儲(chǔ)存在一個(gè)單一的 store 中诫给。
- 惟一改變 state 的辦法是觸發(fā) action香拉，一個(gè)描述發(fā)生什么的對(duì)象。
即：不直接修改 state中狂，編寫(xiě)專門(mén)的函數(shù)來(lái)決定每個(gè) action 如何改變應(yīng)用的 state凫碌，這個(gè)函數(shù)被叫做 reducer。
Action
是把數(shù)據(jù)從應(yīng)用傳到 store 的有效載荷胃榕。是 store 數(shù)據(jù)的唯一來(lái)源盛险。通過(guò) store.dispatch() 將 action 傳到 store。
const action = {
type: 'ADD_TODO', // 一定有 type 字段
payload: 'Learn Redux'
};
Reducer
(previousState, action) => {newState 的純函數(shù)}
function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return Object.assign({}, state, {
visibilityFilter: action.filter
})
default:
return state
}
}
//注意點(diǎn)：
//1\. 不要修改 state 值勋又。如果符合條件苦掘，則新建一個(gè)副本返回（第一個(gè)參數(shù)為{}而不是 state）;
//2\. 在 default 情況下返回舊的 state。
Store（單一）
維持應(yīng)用的 state楔壤；
提供 getState() 方法獲取 state鹤啡；
提供 dispatch(action) 方法更新 state；
通過(guò) subscribe(listener) 注冊(cè)監(jiān)聽(tīng)器;
通過(guò)unsubscribe(listener) 返回的函數(shù)注銷(xiāo)監(jiān)聽(tīng)器蹲嚣。
import { createStore } from 'redux';
import todoApp from './reducers';
let store = createStore(todoApp); //第二個(gè)參數(shù)可選递瑰，設(shè)置 state 的初始狀態(tài)
combineReducers({ counter: counter, todos: todos}); //將兩個(gè)reducer 合并在一起
數(shù)據(jù)流
調(diào)用store.dispatch(action)。
Redux store 調(diào)用傳入的 reducer 函數(shù)隙畜。
根 reducer 應(yīng)該把多個(gè)子 reducer 輸出合并成一個(gè)單一的 state 樹(shù)抖部。
Redux store 保存了根 reducer 返回的完整 state 樹(shù)。
流程.png
