actions =》reducer =》store
一. action(描述要發(fā)生的事情) 既有普通的對(duì)象艰争,又有能返回對(duì)象的創(chuàng)建函數(shù)迷帜,都可以傳入dispatch()中
二. reducer中刀脏,傳入一個(gè)值只會(huì)得到一個(gè)結(jié)果算柳,每次都這樣。這意味著:reducer內(nèi)不能做以下的事情:
修改傳入的參數(shù)
執(zhí)行副作用的操作雳攘,如API請(qǐng)求和路由跳轉(zhuǎn)
調(diào)用非純函數(shù)茴恰,如Date().now 或 Math.radom()
三. store: 我們學(xué)會(huì)了使用 action 來描述“發(fā)生了什么”巴粪,和使用 reducers 來根據(jù) action 更新 state 的用法哨鸭。Store 就是把它們聯(lián)系到一起的對(duì)象民宿。再次強(qiáng)調(diào)一下 Redux 應(yīng)用只有一個(gè)單一的 store。當(dāng)需要拆分?jǐn)?shù)據(jù)處理邏輯時(shí)像鸡,你應(yīng)該使用 reducer 組合 而不是創(chuàng)建多個(gè) store活鹰。
Store 有以下職責(zé):
維持應(yīng)用的 state;
提供 getState() 方法獲取 state只估;
提供 dispatch(action) 方法更新 state志群;
通過 subscribe(listener) 注冊(cè)監(jiān)聽器;
通過 subscribe(listener) 返回的函數(shù)注銷監(jiān)聽器。
通過replaceReducer(nextReducer)可以替換掉當(dāng)前的reducer
四.Redux 應(yīng)用中數(shù)據(jù)的生命周期遵循下面 4 個(gè)步驟:
調(diào)用store.dispatch(action) :你可以在任何地方調(diào)用 store.dispatch(action)蛔钙,包括組件中赖舟、XHR 回調(diào)中、甚至定時(shí)器中夸楣。
redux store 調(diào)用傳入的根reducer函數(shù):
根 reducer 應(yīng)該把多個(gè)子 reducer 輸出合并成一個(gè)單一的 state 樹:使用combineReducers()
Redux store 保存了根 reducer 返回的完整 state 樹。這個(gè)新的樹就是應(yīng)用的下一個(gè) state子漩!所有訂閱 store.subscribe(listener) 的監(jiān)聽器都將被調(diào)用豫喧;監(jiān)聽器里可以調(diào)用 store.getState() 獲得當(dāng)前 state。
現(xiàn)在幢泼,可以應(yīng)用新的 state 來更新 UI紧显。如果你使用了 React Redux 這類的綁定庫,這時(shí)就應(yīng)該調(diào)用 component.setState(newState) 來更新缕棵。
五. 容器組件與UI組件孵班,顧名思義,UI組件只負(fù)責(zé)樣式招驴,容器組件負(fù)責(zé)將UI組件結(jié)合起來并負(fù)責(zé)傳遞數(shù)據(jù)
容器組件就是使用 store.subscribe() 從 Redux state 樹中讀取部分?jǐn)?shù)據(jù)篙程,并通過 props 來把這些數(shù)據(jù)提供給要渲染的組件
你可以手工來開發(fā)容器組件,但建議使用使用 React Redux 庫的 connect() 方法來生成别厘,這個(gè)方法做了性能優(yōu)化來避免很多不必要的重復(fù)渲染虱饿。(這樣你就不必為了性能而手動(dòng)實(shí)現(xiàn) React 性能優(yōu)化建議 中的 shouldComponentUpdate 方法。)
使用 connect() 前,需要先定義 mapStateToProps 這個(gè)函數(shù)來指定如何把當(dāng)前 Redux store state 映射到展示組件的 props 中 export default connect(mapStateToProps)(組件)
- redux 的性能問題:redux-in-chinese