Redux Toolkit报错：reducer为必填项且需为函数或可合并对象，如何解决？

问题描述 #

使用Redux Toolkit开发卡片功能时，遇到如下报错：

'reducer' is a required argument, and must be a function or an object of functions that can be passed to combineReducers

相关代码文件如下：

features/store.js #

import { configureStore } from "@reduxjs/toolkit";
import {cardReducer} from "./cardSlice";

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

export default store;

main.jsx #

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import { Provider } from 'react-redux';
import  store  from './features/store.js';


ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
)

cardSlice.js #

import { createSlice } from '@reduxjs/toolkit';

const cardSlice = {
    name: 'card',
    initialState: {
        cards: [],
    },
    reducers: {
        createCard: (state, action) => {
            cards: [
                ...state.cards,
                {
                    id: state.cards.length + 1,
                    name: action.payload.name,
                }
            ]
        }
    }
}

export const cardReducer = cardSlice.reducer
export const createCard = cardSlice.actions

错误原因与修复方案 #

• 未调用createSlice函数：核心问题是你仅定义了配置对象，没有调用Redux Toolkit的createSlice()方法生成合法的reducer和actions，导致cardSlice.reducer为undefined，configureStore无法识别。
• Reducer状态更新写法错误：createCard内直接写cards: [...]无法修改state，需通过state.cards操作（Redux Toolkit的Immer库允许直接修改state对象）。
• Action导出错误：cardSlice.actions是包含所有action creator的对象，需解构出具体的createCard，而非直接导出整个对象。

修改后的完整代码 #

cardSlice.js（核心修改） #

import { createSlice } from '@reduxjs/toolkit';

// 调用createSlice生成slice实例
const cardSlice = createSlice({
    name: 'card',
    initialState: {
        cards: [],
    },
    reducers: {
        createCard: (state, action) => {
            // 用push直接更新数组（Immer会自动处理不可变更新）
            state.cards.push({
                id: state.cards.length + 1,
                name: action.payload.name,
            })
        }
    }
})

export const cardReducer = cardSlice.reducer
// 解构导出指定的action creator
export const { createCard } = cardSlice.actions

store.js（可选优化） #

推荐将reducer放入命名对象中，让store结构更清晰：

import { configureStore } from "@reduxjs/toolkit";
import {cardReducer} from "./cardSlice";

const store = configureStore({
   reducer: {
     card: cardReducer // 后续可通过state.card.cards访问卡片数据
   }
});

export default store;

修改后重新运行代码，报错即可解决。

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