react之路：使用combineReducers拆分reducer

github倉庫地址：https://github.com/wanghao12345/react-book

背景

如果一個項目，比較大，需要redux存儲的狀態數據比較多時，reducer.js無疑是會非常臃腫的。所以為了簡化reducer.js文件，我們應該按照功能模塊將這個大的reducer.js文件，拆分成若干個reducer.js。那么這里就需要使用redux里面的一個方法：combineReducers

步驟

1.在各個需要使用redux的功能模塊下建立自己的reducer.js文件，大體格式如下：

const defaultState = {
    focused: false
}

export default (state = defaultState, action) => {

    if (action.type === 'search_focus') {
        return {
            focused: true
        }
    }

    if (action.type === 'search_blur') {
        return {
            focused: false
        }
    }

    return state
}

2.在store下的reducer.js引入combineReducers

import { combineReducers } from 'redux'
import { reducer as headerReducer } from 'xxxxxxxx'
......


const reducer = combineReducers({
    header: headerReducer,
    ......
})

export default reducer

3.使用的時候，需要注意，以上一節為例，將倉庫的state映射到props這里的mapStateToProps里面return的數據需要加上自定義命名reducer名字，這里以header為例

/**
 * 將倉庫的state映射到props(獲取state)
 * @param state
 */
const mapStateToProps = (state) => {
    return {
        focused: state.header.focused
    }
}