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
    }
}