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数据
