Redux(RFC)使用combineReducers时如何订阅多reducer及解决导入报错

导入报错解决方法 #

你编写的两个reducer均使用export default做默认导出，但是根reducer中使用了import { xxx }的命名导入语法，两者不匹配触发报错，直接修改根reducer的导入代码即可：

import { combineReducers } from "redux";
// 去掉导入时的大括号，使用默认导入语法
import getProductDetailsReducer from "./getProductDetailsReducer";
import cartItemsReducer from "./cartItemsReducer";

export default combineReducers({
  getProductDetailsReducer,
  cartItemsReducer
});

多reducer数据获取方案 #

使用combineReducers合并后，整个store的state会按照你传入的对象key分层，结构如下：

{
  getProductDetailsReducer: {
    data: [] // 对应getProductDetailsReducer返回的state
  },
  cartItemsReducer: {
    cartItems: "" // 对应cartItemsReducer返回的state
  }
}

你原来直接从根state取data、cartItems的写法少了一层reducer对应的key，所以无法取到值，根据使用场景修改方式如下：

1. subscribe订阅写法修改 #

store.subscribe(function () {
  console.log(store.getState().getProductDetailsReducer.data);
  console.log(store.getState().cartItemsReducer.cartItems);
});

2. connect映射数据到组件 #

当前你使用的connect()(xxx)只给组件注入了dispatch方法，没有把state数据映射到props，需要添加第一个参数mapStateToProps配置：

// 示例：在需要同时调用两个reducer数据的页面中配置
const mapStateToProps = (state) => {
  return {
    // 把需要的字段映射到组件props
    productList: state.getProductDetailsReducer.data,
    cartCount: state.cartItemsReducer.cartItems
  }
}
// 传入mapStateToProps后，组件内可直接通过this.props.productList、this.props.cartCount取值
export default connect(mapStateToProps)(CartPage);

可选优化 #

如果觉得state的key过长，可以在合并reducer时自定义短别名：

// 根reducer修改
export default combineReducers({
  product: getProductDetailsReducer,
  cart: cartItemsReducer
});
// 后续取值简化为state.product.data、state.cart.cartItems即可

内容的提问来源于stack exchange，提问作者Atharva Joshi