使用combineReducers()与单一reducer运行结果不同的原因

这事儿的核心原因很简单：使用combineReducers后，Redux Store的状态结构发生了嵌套变化，但你的组件还是按照原来的扁平结构去读取状态，自然拿不到值。

具体来说： #

当你直接用根reducer创建Store时，Store的状态就是根reducer里定义的initialState，结构是这样的：

{
  callsInProgress: false,
  groupingOptions: ["Strategy", "User", "Date"],
  groupingType: "Strategy",
  numberOfCalls: 2,
  items: [new Entity()]
}

但当你用combineReducers({ rootreducer })包裹后，Store的状态会变成一个嵌套对象，键名就是你传给combineReducers的对象键（这里是rootreducer），对应的值才是原来根reducer管理的状态：

{
  rootreducer: {
    callsInProgress: false,
    groupingOptions: ["Strategy", "User", "Date"],
    groupingType: "Strategy",
    numberOfCalls: 2,
    items: [new Entity()]
  }
}

你的组件里的mapStateToProps还是写的state.groupingOptions，但现在这个属性其实在state.rootreducer.groupingOptions里，所以自然返回undefined，导致组件渲染null。

两种解决方法： #

方法1：修改mapStateToProps适配新的状态结构

直接调整状态读取的路径，同时修正类型定义：

const mapStateToProps = (state: { rootreducer: IStoreState }) => {
  return {
    groupingOptions: state.rootreducer.groupingOptions,
    groupingType: state.rootreducer.groupingType,
  };
}

方法2：调整combineReducers的写法（如果不需要拆分多个reducer）

如果你目前只有这一个根reducer，其实可以直接导出它，没必要用combineReducers。但如果是为了未来扩展需要保留combineReducers，可以给reducer起个更清晰的名字（比如app），同时保持结构一致：

// reducers/index.ts
import {combineReducers} from 'redux';
import rootreducer from './rootreducer';

export default combineReducers({
  app: rootreducer // 用更语义化的键名替代rootreducer
});

然后对应的mapStateToProps改成：

const mapStateToProps = (state: { app: IStoreState }) => {
  return {
    groupingOptions: state.app.groupingOptions,
    groupingType: state.app.groupingType,
  };
}

调试小技巧 #

遇到这类状态读取问题时，可以在mapStateToProps里先打印一下state，看看实际的结构是什么样的，很快就能定位到问题：

const mapStateToProps = (state: any) => {
  console.log('Current Store State:', state); // 打印状态结构
  return {
    groupingOptions: state.rootreducer.groupingOptions,
    groupingType: state.rootreducer.groupingType,
  };
}

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