依照慣例累奈,開(kāi)頭先放出redux中文文檔地址
使用react
當(dāng)然要配套學(xué)習(xí)redux
,本文就對(duì)redux
學(xué)習(xí)進(jìn)行一個(gè)總結(jié)卖漫。
redux的作用:簡(jiǎn)言之就是一整套框架幫助管理狀態(tài)(state
)费尽,至于狀態(tài)管理的最佳實(shí)踐這應(yīng)該是另一個(gè)很大的話題了,這里就不多討論了羊始,對(duì)于初次使用redux
的用戶而言最簡(jiǎn)單的建議就是“先接受框架提供的方式旱幼,當(dāng)你覺(jué)得完全理解了這些后再考慮按自己的思路優(yōu)化、改進(jìn)”突委。
redux
三大基礎(chǔ)概念
這里我們改變一下文檔的介紹順序(文檔可能是按首字母排序的)柏卤,我按照我認(rèn)為比較容易理解的思路敘述一遍。
Store
首先匀油,使用redux
管理狀態(tài)(state
)缘缚,那么state
到底放在哪兒維護(hù)呢?所有的state
(state
樹(shù))都放在store
中敌蚜,而且是一個(gè)單一的store
桥滨。
創(chuàng)建store
可以通過(guò)redux
提供的API createStore
createStore(reducer, [preloadedState], enhancer)
reducer(Function)
:接收兩個(gè)參數(shù),分別是當(dāng)前state樹(shù)
和要處理的action
[preloadedState] (any)
:可選參數(shù)弛车,給定初始state
enhancer(Function)
:返回的還是store creator
例子:
import {createStore} from 'redux'; import todos from './reducers'; let store = createStore(todos, ['use Redux']);
store
提供幾個(gè)API
齐媒,讓我們操作state
getState()
:獲取state
dispatch(action)
:更新state
subscribe(listener)
:注冊(cè)監(jiān)聽(tīng)器
subscribe(listener)
:返回的函數(shù)注銷監(jiān)聽(tīng)器
PS:請(qǐng)?zhí)貏e注意這個(gè)函數(shù)接收的第一個(gè)參數(shù)是reducer
,意味著創(chuàng)建一個(gè)store
我們必須提供的是reducer
Reducer
reducer
是一個(gè)純函數(shù)纷跛,接收舊的 state
和 action
喻括,返回新的 state
。
(previousState, action) => newState
簡(jiǎn)單地闡述一下贫奠,reducer
函數(shù)的奧義就是傳入一個(gè)state
然后根據(jù)action
來(lái)返回新的state
唬血。
有一個(gè)要點(diǎn),返回的state
不是通過(guò)修改原state
得到的唤崭,需要返回的state
應(yīng)該是在副本上修改的結(jié)果拷恨。
另外,reducer
可以拆分谢肾,最推薦的做法就是創(chuàng)建小的reducer
腕侄,然后通過(guò)combineReducers()
把小reducer
合并。
Action
action
本質(zhì)上是 JavaScript
普通對(duì)象。
action
中會(huì)有一個(gè)type
屬性兜挨,作用就是觸發(fā)特定的action
膏孟。
例子:
最簡(jiǎn)單的action
可以只定義一個(gè)字符串const action = 'start';
常見(jiàn)一點(diǎn)的會(huì)是一個(gè)對(duì)象
{ type: TOGGLE_TODO, index: 5 }
還有
action
創(chuàng)建函數(shù),返回一個(gè)action
對(duì)象function addTodo(text) { return { type: ADD text } }
action
創(chuàng)建完成后可以綁定給一個(gè)函數(shù)拌汇,后續(xù)就可以直接調(diào)用這個(gè)函數(shù)
const boundDispatchAddTodo = (text) => {dispatch(addTodo(text))};
···
boundDispatchAddTodo(text);
(未完待續(xù))