Redux 版本:3.7.2
Redux 是 JavaScript 狀態容器,提供可預測化的狀態管理。
說白了Redux就是一個資料儲存工具,所以資料基礎模型有get方法,set方法以及資料改變後通知的物件subscribe訂閱者。
- getState: getter(取)
- dispatch: setter(存)
- subscribe: 訂閱
Redux 提供了五個方法
接下來我們來一一解析。
createStore
建立一個 Redux store 來以存放應用中所有的 state。應用中應有且僅有一個 store。
引數:
- reducer (Function): 接收兩個引數,分別是當前的 state 樹和要處理的 action,返回新的 state 樹。
- [ reloadedState ] (any):初始時的 state。
- enhancer (Function):後面再講。
返回值:
- getState:獲取store方法
- dispatch:修改store方法
- subscribe:訂閱store變化方法
- replaceReducer:重置reducer方法
先來寫一個基礎的 createStore 如下:
function createStore() {
function getState() { } // 取
function dispatch() { } // 存
function subscribe() { } // 訂閱
function replaceReducer() { } // 重置reducer
return { getState, dispatch, subscribe, replaceReducer }
}
getState
getState 實現很簡單,直接返回 currentState。
function createStore() {
let currentState = {}; // 資料
function getState() { // 取
return currentState;
}
function dispatch() { } // 存
function subscribe() { } // 訂閱
function replaceReducer() { } // 重置reducer
return { getState, dispatch, subscribe, replaceReducer }
}
dispatch
dispatch 傳入 action,通過 action.type 區別操作。
function createStore() {
let currentState = {};
function getState() { // 取
return currentState;
}
function dispatch(action) { // 存
switch (action.type) {
case 'PLUS':
currentState = {
...currentState,
count: currentState.count + 1,
};
}
return action;
}
function subscribe() { } // 訂閱
function replaceReducer() { } // 重置reducer
return { getState, dispatch, subscribe, replaceReducer }
}
因為 Redux 要通用,所以 dispatch 內和業務相關的程式碼要提取出來,Redux 給它起了個名字,叫 reducer。
提取reducer,
const initialState = {
count: 0,
}
export default (state = initialState, action) => {
switch (action.type) {
case 'PLUS':
return {
...state,
count: state.count + 1,
}
case 'MINUS':
return {
...state,
count: state.count - 1,
}
default:
return state
}
}
給 createStore 新增兩個引數 reducer, preloadedState。
preloadedState非必傳,如果不傳,currentState 預設值就是 undefined。
在 createStore 中新增初始化方法 dispatch({ type: '@@redux/INIT' })
; 初始化的 action.type 必須是 reducer 中沒有使用過的,Redux 原始碼中使用了 '@@redux/INIT'
。初始化方法會執行一次 dispatch。
初始化時,如果 currentState 是 undefined, 那麼在 reducer 中, state = initialState
會把 initialState 賦值給 state,然後通過 default return 出去, 最後修改 currentState。相當於 currentState = initialState。
最後 createStore 如下
function createStore(reducer, preloadedState) {
let currentState = preloadedState;
function getState() { // 取
return currentState;
}
function dispatch(action) { // 存
currentState = reducer(currentState, action);
return action;
}
function subscribe() { } // 訂閱
function replaceReducer() { } // 重置reducer
dispatch({ type: '@@redux/INIT' }); // 初始化
return { getState, dispatch, subscribe, replaceReducer }
}
根據程式碼可以看出,reducer 和 action 都是開發者自定義的,Redux 只是把 reducer 返回的 state 賦值給了 currentState,那麼開發者自定義其他格式的action ,並且在 reducer 中作出對應的解析,然後返回 state,當然也是完全可以的。只是 Redux 統一了這種寫法,降低了個性化帶來的開發成本。
實際上 createStore 還有第三個引數 enhancer,目前用不到,後面再講。
subscribe
subscribe 有一個引數 listener (Function): 每當 dispatch action 的時候都會執行的回撥。
subscribe 使用了設計模式中的 釋出-訂閱模式,又叫 觀察者模式。
實現:
- 在 createStore 中新增一個儲存 變化監聽器 的陣列 currentListeners;
- subscribe 將 變化監聽器 放入 currentListeners;
- 每次 dispatch 時, 迴圈執行 currentListeners 中的 變化監聽器。
function createStore(reducer, preloadedState) {
let currentState = preloadedState;
let currentListeners = [];
function getState() { // 取
return currentState;
}
function dispatch(action) { // 存
currentState = reducer(currentState, action);
currentListeners.forEach(fn => fn());
return action;
}
function subscribe(listener) { // 訂閱
currentListeners.push(listener);
}
function replaceReducer() { } // 重置reducer
dispatch({ type: '@@redux/INIT' }); // 初始化
return { getState, dispatch, subscribe, replaceReducer }
}
replaceReducer
重置 reducer, 並不會重置 currentState。
實現:
- 新增變數 currentReducer;
- dispatch 使用 currentReducer;
- replaceReducer 方法將 nextReducer 賦值給 replaceReducer, 然後執行
dispatch({ type: '@@redux/INIT' })
。
注意:實際上,replaceReducer 中的 dispatch({ type: '@@redux/INIT' })
,只有此時 currentState 是 undefined 時,才有作用,會把新的 initialState 賦值給 currentState。
function createStore(reducer, preloadedState) {
let currentReducer = reducer
let currentState = preloadedState;
let currentListeners = [];
function getState() { // 取
return currentState;
}
function dispatch(action) { // 存
currentState = currentReducer(currentState, action);
currentListeners.forEach(fn => fn());
return action;
}
function subscribe(listener) { // 釋出訂閱
currentListeners.push(listener);
}
function replaceReducer(nextReducer) { // 重置reducer
currentReducer = nextReducer;
dispatch({ type: '@@redux/INIT' }); // 重置
}
dispatch({ type: '@@redux/INIT' }); // 初始化
return { getState, dispatch, subscribe, replaceReducer }
}
createStore 的實現到這裡已經完成,Redux 原始碼除此之外還做了大量的錯誤校驗。
combineReducers
隨著專案越來越大,把 reducer 放在一個檔案裡寫會越來越臃腫,於是 Redux 提供了 combineReducers 方法。
先來看下如何使用
rootReducer = combineReducers({potato: potatoReducer, tomato: tomatoReducer})
// rootReducer 將返回如下的 state 物件
{
potato: {
// ... potatoes, 和一些其他由 potatoReducer 管理的 state 物件 ...
},
tomato: {
// ... tomatoes, 和一些其他由 tomatoReducer 管理的 state 物件,比如說 sauce 屬性 ...
}
}
combineReducers 引數是 reducers 物件,返回一個合成後的 reducer。
實現邏輯比較簡單,迴圈把 reducers 裡的每一個 reducer 都執行, 執行結果放在 nextState 裡,如果資料改變了就返回 nextState,如果資料沒有改變就返回傳入的 state。
注意:如果資料沒有改變,返回的是傳入的 state,雖然此時和 nextState 資料是一樣的,但是實際地址並不一樣。為了區分,Redux 特意用了 hasChanged 變數來記錄。
function combineReducers(reducers) {
const reducerKeys = Object.keys(reducers); // key[]
return function combination(state = {}, action) {
let hasChanged = false; // state 是否改變
const nextState = {}; // 改變後的 state
// 迴圈 reducers
reducerKeys.forEach(key => {
const reducer = reducers[key]; // 當前 reducer
const previousStateForKey = state[key]; // 當前 state
const nextStateForKey = reducer(previousStateForKey, action); // 如果 沒有匹配到action.type,會在 reducer 中的 switch default 返回傳入的 state,即 previousStateForKey
nextState[key] = nextStateForKey;
hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
})
return hasChanged ? nextState : state;
}
}
bindActionCreators
bindActionCreators(actionCreators, dispatch) 把一個 value 為不同 action creator 的物件,轉成擁有同名 key 的物件。
action 生成器名字叫做叫 action creator, 如下
function addTodo(text) {
return {
type: 'ADD_TODO',
text,
};
}
修改資料需要這樣寫
dispatch(addTodo('Use Redux'))
如果我們多個 action creator,寫起來會比較繁瑣,
dispatch(addTodo('Use Redux'))
dispatch(plusTodo())
dispatch(setDataTodo({ id: 1 }))
所以 Redux 提供了 bindActionCreators 函式,傳入 action creators 和 dispatch, 返回繫結了 dispatch 的 action creators。
實現也很簡單,遍歷 actionCreators, 把每個元素用 dispatch 處理後生成新的函式,返回新函式的集合。
actionCreators 引數是 action creator 的集合物件,如 { addTodo, addTodo1 }
。實現程式碼如下:
function bindActionCreators(actionCreators, dispatch) {
const boundActionCreators = {};
Object.keys(actionCreators).forEach(key => {
const actionCreator = actionCreators[key];
if (typeof actionCreator === 'function') {
boundActionCreators[key] = (...args) => dispatch(actionCreator(...args));
}
})
return boundActionCreators;
}
使用 bindActionCreators 寫起來就會方便很多
const boundActionCreators = bindActionCreators({
addTodo,
plusTodo,
setDataTodo,
}, dispatch);
// 寫入資料
boundActionCreators.addTodo('Use Redux')
boundActionCreators.plusTodo()
boundActionCreators.addTodo({ id: 1 })
Redux 支援 actionCreators 是一個單個 action creator 的函式,所以提取公共方法。改造如下:
function bindActionCreator(actionCreator, dispatch) {
return (...args) => dispatch(actionCreator(...args));
}
function bindActionCreators(actionCreators, dispatch) {
if (typeof actionCreators === 'function') {
return bindActionCreator(actionCreators, dispatch)
}
const boundActionCreators = {};
Object.keys(actionCreators).forEach(key => {
const actionCreator = actionCreators[key];
if (typeof actionCreator === 'function') {
boundActionCreators[key] = bindActionCreator(actionCreator, dispatch);
}
})
return boundActionCreators;
}
compose
從右到左來組合多個函式。
先來看看原始碼:
function compose(...funcs) {
if (funcs.length === 0) {
return arg => arg
}
if (funcs.length === 1) {
return funcs[0]
}
return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
最後一行很難理解,把它換成function寫法如下
funcs.reduce(function (a, b) {
return function (...args) {
return a(b(...args))
}
})
先看下reduce方法
reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
// 從左到右為每個陣列元素執行一次回撥函式,並把上次回撥函式的返回值放在一個暫存器中傳給下次回撥函式,並返回最後一次回撥函式的返回值。
previousValue 上次迴圈的返回值
currentValue 當前迴圈item
所以第二次迴圈過程如下
// 第一次迴圈返回值為
function (...args) {
return a(b(...args))
}
// 第二次迴圈時,第一個引數為:第一次迴圈的返回值,第二個引數為:funcs 內第三個元素,用c來表示
// 第二次迴圈返回值為
function (...args) {
return (function (...args) {
return a(b(...args))
})(c(...args))
}
// 整理後
function (...args) {
return a(b(c(...args)))
}
所以 [a, b, c, d, e]
的執行結果是 (...args) => a(b(c(d(e(...args)))))
。
所以能看出來,funcs 內函式需要滿足 函式引數和函式返回值結構一致。
applyMiddleware
applyMiddleware 是把 dispatch 一層一層包裝。洋蔥圈模型。
先看看 createStore 的第三個引數 enhancer
function createStore(reducer, preloadedState, enhancer) {
// 實現了 preloadedState 引數可以省略
if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
enhancer = preloadedState
preloadedState = undefined
}
if (typeof enhancer !== 'undefined') {
// 看起來 enhancer 是個高階函式,返回值還是 store creator
// 可以看出 enhancer 的大概結構為
// (createStore) => (reducer, preloadedState) => createStore(educer, preloadedState)
return enhancer(createStore)(reducer, preloadedState)
}
// 這裡是其他程式碼
// ...
}
再看看官網給的 applyMiddleware 使用例子
let store = createStore(
todos,
[ 'Use Redux' ],
applyMiddleware(logger)
)
所以 applyMiddleware 的結構應該是
(...middlewares) => (createStore) => (reducer, preloadedState) => createStore(educer, preloadedState)
所以猜出來了 applyMiddleware 的引數是函式,返回值執行多次後還是 createStore(educer, preloadedState)。
所以再來看官方定義就比較好理解
Middleware 可以讓你包裝 store 的 dispatch 方法來達到你想要的目的。同時, middleware 還擁有“可組合”這一關鍵特性。多個 middleware 可以被組合到一起使用,形成 middleware 鏈。其中,每個 middleware 都不需要關心鏈中它前後的 middleware 的任何資訊。
來看 applyMiddleware 看原始碼, 跟著 序號看會稍微清晰點:
applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
const store = createStore(reducer, preloadedState, enhancer)
let dispatch = store.dispatch
let chain = []
const middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
// 2、chain內元素結構為 (store.dispatch) => store.dispatch
// 所以 middleware(middlewareAPI) 結果為 (store.dispatch) => store.dispatch
// 所以 middleware 結構為 (middlewareAPI) => (store.dispatch) => store.dispatch
// 即 引數 middlewares 內元素結構為 (middlewareAPI) => (store.dispatch) => store.dispatch
chain = middlewares.map(middleware => middleware(middlewareAPI))
// 1、上面解釋過 compose 的返回值是 (...arg) => a(b(c(...arg))),
// 所以下面 dispatch = ((...arg) => a(b(c(...arg))))(store.dispatch)
// 即 dispatch = a(b(c(store.dispatch)))
// 所以 a、b、c 即 chain內元素 的結構需要為 (store.dispatch) => store.dispatch
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch // 這裡可以看出,applyMiddleware 只包裝替換了 createStore 的 dispatch
}
}
}
現在我們知道了 applyMiddleware 的引數結構是 (middlewareAPI) => (store.dispatch) => store.dispatch
,然後我們來寫個簡單的 middleware
// 原始長這個樣子
function logger(middlewareAPI) {
return (dispatch) => dispatch;
}
// 然後 給 dispatch 包裝以下,並且換個名字叫 next
function logger(middlewareAPI) {
return (next) => (action) => {
let value = next(action);
return value;
};
}
// 然後 加入功能
function logger(middlewareAPI) {
return (next) => (action) => {
// 這裡的 dispatch 是 createStore 建立的。一般不用。
const { getState, dispatch } = middlewareAPI;
console.log('will dispatch', action);
let value = next(action);
console.log('state after dispatch', getState());
// createStore 裡實現的 dispatch 返回 action,
// 一般會是 action 本身,除非
// 後面的 middleware 修改了它。
return value;
};
}
最後再來回味下 applyMiddleware 的這幾個結構
// compose
([a, b, c, d, e]) => (...args) => a(b(c(d(e(...args)))))
// applyMiddleware
(...middlewares) => (createStore) => (reducer, preloadedState) => createStore(educer, preloadedState)
// middleware
(middlewareAPI) => (dispatch) => dispatch