combineReducers() 用法詳解

當業務應用變得復雜，我們就需要對 reducer 函數進行拆分，拆分后的每一塊獨立負責管理 state 的一部分。

combineReducers() 輔助函數的作用就是：把一個由多個不同 reducer 函數作為 value 的 object 合並成為一個總的 reducers 函數。然后可以對這個 reducers 調用 createStore()。

合並后的 reducers 可以調用各個子 reducer，並把他們的結果合並成一個 state 對象。state 對象的結構由傳入的多個 reducer 的 key 決定。

最終，state 對象的結構會是這樣的：

{
  reducer1: ...
  reducer2: ...
}

通過為傳入對象的 reducer 命名不同來控制 state key 的命名。例如，你可以調用 combineReducers({ todos: myTodosReducer, counter: myCounterReducer }) 將 state 結構變為 { todos, counter }。

通常的做法是命名 reducer，然后 state 再去分割那些信息，因此你可以使用 ES6 的簡寫方法：combineReducers({ counter, todos })。這與 combineReducers({ counter: counter, todos: todos }) 一樣。

參數

combineReducers() 接收一個對象，它的值對應不同的 reducer 函數，這些reducer 函數會被合並為一個。然后被引入到 store 中，放到 createStore() 中。

combineReducers({
    reducer1,
    reducer2,
    ...
})

返回值

(Function)：一個調用 reducers 對象里所有 reducer 的 reducer，並且構造一個與 reducers 對象結構相同的 state 對象。

示例

// goodsList/reducer.js
const defaultState = {
    goodsList: []
}

const reducer = (state = defaultState, action) => {
    switch (action.type) {
        case 'GET_GOODS_LIST':
            return {
                ...state,
                goodsList: action.data

            }
        default:
            return state;
    }

}

export default reducer;

// goodsList/action.js
const getGoodsList = () => {
    return (dispatch) => {
        fetch('http://demo.com/api/demoDemoItem')
            .then(response => response.json())
            .then(res => {
              dispatch({
                  type: 'GET_GOODS_LIST',
                  data: res
              })
            })
    }
}

export {
    getGoodsList
}

// redux/reducers.js
import { combineReducers } from "redux";
import goodsListReducer from "../pages/goodsList/reducer";
export default combineReducers({
    goodsListReducer
})

// redux/store.js
import { createStore, applyMiddleware } from "redux";
import thunk from 'redux-thunk';
import reducers from './reducers';

const store = createStore(reducers, applyMiddleware(thunk));
export default store;

import React, {Component} from 'react';
import './index.css'
import Header from "./components/header";
import TabBar from "./components/tabBar";
import GoodsItem from "./components/goodsItem";
import { connect } from 'react-redux';
import { getGoodsList } from "./action";

class GoodsList extends Component{
    componentDidMount(){
        // 從 store 中獲取數據
        this.props.getGoodsList();
    }
    render(){
        return (
            <div className="container">
                <Header />
                <TabBar />
                {
                    this.props.goodsList.map((item, index) => {
                        return (
                            <GoodsItem goodsItem={item} key={index}/>
                        )
                    })
                }

            </div>
        );
    }
}
const mapStateToProps = (state) => {
    return {
        // 注意 state.gooderListReducer 才存在 goodsList數據
        goodsList: state.goodsListReducer.goodsList
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        getGoodsList() {
            dispatch(getGoodsList())
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(GoodsList);

注意 state.gooderListReducer 才存在 goodsList數據

參考文章：Redux框架之combineReducers() 用法講解