如何用combineReducers嵌套合并reducer并解决devtools状态不显示问题

combineReducers 要求传入的配置对象中，每个属性的值必须是reducer函数，不能直接传入嵌套的普通对象。你之前给product字段直接传reducer映射对象的写法不符合语法规则，Redux无法正常解析生成对应状态分支，这就是react-redux-devtools里状态无法正常显示的原因。

通过嵌套调用combineReducers即可实现状态分支的分组归并，写法如下：

1. 先对同域的reducer做单独合并，生成对应域的聚合reducer函数

// 合并所有产品相关reducer，生成product域的独立reducer
const productReducer = combineReducers({
  productList: productListReducer,
  productDetails: productDetailsReducer,
  productDelete: productDeleteReducer,
  productCreate: productCreateReducer,
  productUpdate: productUpdateReducer,
  productReviewCreate: productReviewCreateReducer,
  productTopRated: productTopRatedReducer,
})

2. 把聚合后的域reducer挂载到根reducer配置的对应字段上

const rootReducer = combineReducers({
  // 其他跨域reducer正常挂载即可，例如：
  // cart: cartReducer,
  // user: userReducer,
  // order: orderReducer,

  // 产品域挂载合并后的reducer函数
  product: productReducer
})

• 状态访问路径需要同步修改：原来直接从根状态取的state.productList，调整为从product分支下取值，useSelector示例：

// 旧写法（reducer全挂载在根分支时使用）
// const { loading, products } = useSelector(state => state.productList)

// 新写法（分组后使用）
const { loading, products } = useSelector(state => state.product.productList)
const { product } = useSelector(state => state.product.productDetails)

• 这种嵌套合并的方式支持任意层级的拆分，后续如果需要给产品域再做三级细分（比如把产品配置、产品统计单独拆子分支），可以继续嵌套调用combineReducers，状态结构会非常清晰，维护时只需要定位对应域的合并配置即可。

配置完成后刷新页面，react-redux-devtools里就能正常看到product分支下的所有子状态了。

内容的提问来源于stack exchange，提问作者Austin Howard