Redux(四):combineReducers的使用

combineReducers

在使用Redux的时候，其中Reducer就是个超级大的Switch…Case…这个设计简直太狗屎了。。。为了防止大家写了成千上百个Switch…Case…，Redux给出了combineReducers，让代码更有条理性

分别写不同的Reducer

如果我有两个Reducer文件分别是BugReducer和RightBarReducer

//BugReducer.jsx
export default function reducer(state, action) {
    switch (action.type) {
        case FETCH_ALL_BUG:
            .......
        default:
            return state
    }
}

//RightBarReducer.jsx
export default function reducer(state, action) {

    // 根据不同的action type进行state的更新
    switch (action.type) {
        case RIGHTBAR_SWITCH:
            .....
        default:
            return state
    }
}

可以通过combineReducers把他们合并起来，然后去创建Store

import {combineReducers} from "redux"; // 利用combineReducers 合并reducers
import BugReducer from "../reducers/BugReducer.jsx";
import RightBarReducer from "../reducers/RightBarReducer.jsx"

let reducer = combineReducers({BugReducer,RightBarReducer})

const store = createStore(reducer);

使用自定义名字影响到State的访问

其中如果combineReducers使用

{BugReducer,RightBarReducer}

等同于

{
  "BugReducer":BugReducer,
  "RightBarReducer":RightBarReducer
}

所以说也可以在这一步自己自定义名字

{
  "custom1":BugReducer,
  "custom2":RightBarReducer
}

如果使用了自定义的名字，那么在mapStateToProp访问Redux的State的时候，也要使用自己自定义的名字才能访问到

赏

请问老板还招人么(/ω＼)

支付宝

微信