Reducer
- 提前設(shè)計好
state對象的結(jié)構(gòu) - 把state想象成數(shù)據(jù)庫. 每個數(shù)據(jù)以 ID 為主鍵, 不同實體或列表間通過 ID 相互引用數(shù)據(jù).
- 保證對Action處理的純潔性, 不要做以下操作
- 修改傳入?yún)?shù)
- 執(zhí)行有副作用的操作, 如API請求和路由跳轉(zhuǎn)
- 調(diào)用非純函數(shù),如
Date.new()
如果經(jīng)常需要修改state,那么建議使用
Immutable-
合并對象
// 合并對象 Object.assign({},state, { visibilityFilter: action.filter }) // 對象展開運算符優(yōu)化 { ...state, ...newState }
-
reducer合成
- 把state的構(gòu)建分離成小函數(shù), 組合多個小函數(shù),合成為整個state
-
拆分成多個reducer后進行合并,redux提供了
combineReducers({})import { combineReducers } from 'redux' const todoApp = combineReducers({ visibilityFilter, todos }) export default todoApp // 含義就是 export default function todoApp(state = {}, action) { return { visibilityFilter: visibilityFilter(state.visibilityFilter, action), todos: todos(state.todos, action) } }
Store
// 每次 state 更新時，打印日志
// 注意 subscribe() 返回一個函數(shù)用來注銷監(jiān)聽器javascript
const unsubscribe = store.subscribe(() =>
console.log(store.getState())
)
// 停止監(jiān)聽 state 更新
unsubscribe();
數(shù)據(jù)流
Redux 是 嚴格的單向數(shù)據(jù)流.
Redux 應(yīng)用中數(shù)據(jù)的生命周期遵循下面4個步驟
- 調(diào)用
store.dispatch(action) -
store調(diào)用傳入的reducer函數(shù), 如API調(diào)用和路由跳轉(zhuǎn),這些應(yīng)該在 dispatch 之前發(fā)生 - 根
reducer應(yīng)該把多個子reducer輸出合并成一個單一的state樹, 利用combineReducer() -
store保存了根reducer返回的完整state樹
搭配React
Redux和react之間沒有關(guān)系, 他甚至可以和 純 JS 進行搭配使用.
默認Redux是不包含React綁定庫的需要獨立安裝
npm install --save react-redux
容器組件(smart)和展示(dumb)組件
- 函數(shù)式組件推薦, 除非需要本地state或生命周期函數(shù)的場景.
- 中間件: middleware
- redux-saga
- redux-thunk
- redux-promise
