redux原始碼學習筆記 - combineReducers
上一篇有了解到，reducer函式的兩個為：當前state和此次dispatch的action。
state的結構是JavaScript物件
，每個key都可以代表著不同意義的資料。比如說
{
lists:object,
type:string
}
lists管理列表資料，type管理選中的型別。此時就需要考慮將state分為不同的子樹，每次子樹資料對應一個reducer子函式，單獨管理對應的state。但是createStore(reducer,preloadedState)
函式接收的reducer必須為單一個函式。這個時候就需要用到combinReducers函式
，它的作用是把多個reducer函式合併成一個最終的reducer函式
。
combineReducers(reducers)
看一下combineReducers函式
實現的核心程式碼，以下程式碼刪掉了異常提示和處理部分，只保留了關鍵部分。
export default function combineReducers(reducers) {
//過濾掉引數中，value不是function的
const reducerKeys = Object.keys(reducers)
const finalReducers = {}
for (let i = 0; i < reducerKeys.length; i++) {
const key = reducerKeys[i]
if (typeof reducers[key] === 'function') {
finalReducers[key] = reducers[key]
}
}
// 處理後的reducers物件的所有key值
const finalReducerKeys = Object.keys(finalReducers)
// 返回合併後的reducer函式，她接收的引數和普通的reducer函式一致。
// 這裡的state是完整的資料結構，而單一的reducer函式接收的只是它管理的那個子樹
return function combination(state = {}, action) {
let hasChanged = false
const nextState = {}
// 有action分派時，對所有的子reducer都觸發
// 因為action有type欄位，所以還是會觸發到對應的之reducer函式
for (let i = 0; i < finalReducerKeys.length; i++) {
const key = finalReducerKeys[i]
const reducer = finalReducers[key]
// 對應的子樹資料
const previousStateForKey = state[key]
// 呼叫對應的reduer函式，返回子樹資料的更新結果
const nextStateForKey = reducer(previousStateForKey, action)
// 子樹資料同步到state中
nextState[key] = nextStateForKey
// 標記資料是否發生變化，只要有一個子樹改變了就算資料已改變
hasChanged = hasChanged || nextStateForKey !== previousStateForKey
}
// 返回state資料
return hasChanged ? nextState : state
}
}
combineReducers
接收的reducers是value為子reducer函式的物件
。物件的key值可以和函式名一致，也可以不同
。返回的state的key值和reducers物件的key值是保持一致的。
所以當createStore(reducer,preloadedState)中的reducer函式是combineReducers合併成的，傳入初始狀態時，要注意state的keys要和reducers一致 。
可見combineReducers
主要的功能，就是把action傳入到所有的子reducer函式遍歷一次，同時處理state的切片和合並
。
當然這裡少了很多異常校驗部分的程式碼，有興趣可以查閱詳細原始碼。
例項
/* reducer */
import {combineReducers} from 'redux';
import testAsync from './testasync';
import todoList from './todolist';
const reducer = combineReducers({
testAsync,
todoList
});
export default reducer;
/* store */
import {createStore} from 'redux';
import reducer from './reducer/index';
let store = createStore(reducer)
{testAsync,todoList}
即是reducer函式物件，key和函式名一樣。{a:testAsync,b:todoList}
寫成這樣也可以。