React Toolkit创建多状态报错：Store does not have a valid reducer

错误根源 #

你在store.js中直接将createSlice返回的整个slice对象（如counterSlice）传给了configureStore的reducer配置项，但configureStore要求reducer字段的值必须是reducer函数，而非slice对象。每个slice的reducer函数其实是slice对象的.reducer属性。

同时你在slice.js里已经通过combineReducers合并了两个reducer并默认导出，但store.js并没有使用这个合并后的结果，反而重复导入slice对象，导致配置错误。

两种解决办法 #

办法一：使用slice中已合并好的reducer #

修改store.js，导入slice.js默认导出的合并后reducer：

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

export default configureStore({
    reducer: rootReducer,
})

对应的useSelector要调整为匹配合并后的state结构：

// 对应counterSlice的状态
const {trigger} = useSelector((state) => state.counterSlice);
// 对应projectNameSlice的状态
const {name} = useSelector((state) => state.projectNameSlice);

办法二：直接在store中配置每个slice的reducer #

修改store.js，使用每个slice的.reducer属性：

import { configureStore } from "@reduxjs/toolkit";
import {counterSlice, projectNameSlice} from "./trigger";

export default configureStore({
    reducer:{
        trigger: counterSlice.reducer,
        projectName: projectNameSlice.reducer
    },
})

同时修正useSelector里的错误变量名（原代码中myProj不存在，对应state里的属性是name）：

const {trigger} = useSelector((state) => state.trigger);
const {name} = useSelector((state) => state.projectName);

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