Redux Toolkit引入rootReducer后访问state返回undefined问题

添加combineReducers合并逻辑后，组件内读取Redux状态返回undefined，未使用reducer合并逻辑时功能运行正常。

相关代码 #

Slice定义 #

const initialState = { valid: false };

const validNameSlice = createSlice({
  name: "validName",
  initialState,
  reducers: {
    makeNameValid(state) {
      state.valid = true;
    },
    makeNameInvalid(state) {
      state.valid = false;
    }
  }
});

export const {
  makeNameValid,
  makeNameInvalid
} = validNameSlice.actions;
export default validNameSlice.reducer;

Reducer合并逻辑 #

import { combineReducers } from "redux";
import validSlice from "./validSlice";

const reducers = {
  validSlice
};

const rootReducer = combineReducers(reducers);
export default rootReducer;

Store配置 #

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./rootReducers";

const store = configureStore({
  reducer: {
    rootReducer
  }
});

export default store;

业务组件代码 #

import { makeNameValid, makeNameInvalid } from "./validSlice";
import { connect } from "react-redux";

class App extends React.Component {
  handleClick = () => {
    console.log(this.props.isValidName);
  };
  handleDispatch = () => {
    this.props.makeNameValid();
  };
  handleDispatchFalse = () => {
    this.props.makeNameInvalid();
  };
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <button onClick={() => this.handleClick()}>test</button>
        <button onClick={() => this.handleDispatch()}>Make true</button>
        <button onClick={() => this.handleDispatchFalse()}>Make false</button>
      </div>
    );
  }
}
const mapStateToProps = (state) => ({
  isValidName: state.validSlice
});
const mapDispatchToProps = (dispatch) => ({
  makeNameValid: () => dispatch(makeNameValid()),
  makeNameInvalid: () => dispatch(makeNameInvalid())
});

export default connect(mapStateToProps, mapDispatchToProps)(App);

问题原因 #

Store配置写法错误：已经通过combineReducers合并完成的rootReducer，被额外包裹在一层对象中传给了configureStore的reducer字段，导致最终Redux状态树多嵌套了一层rootReducer层级，实际状态结构为：

{
  rootReducer: {
    validSlice: {
      valid: false
    }
  }
}

组件内mapStateToProps直接读取state.validSlice，自然拿到undefined。

修复方案 #

修改Store配置，直接将合并完成的rootReducer赋值给reducer字段，去掉多余的对象包裹：

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./rootReducers";

const store = configureStore({
  reducer: rootReducer
});

export default store;

修复后状态结构为预期的{ validSlice: { valid: false } }，组件读取state.validSlice即可正常获取对应状态。

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