"reducer"是一个必需的参数，并且必须是可以传递给组合Reducers的函数或函数的对象，错误如何解决这个问题？

Question

所以我使用redux工具包创建了一张卡，这是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

我已经检查了好几次，并检查了堆栈溢出的答案，但无法解决此错误。

Answer 1

您导入createSlice时没有使用它。

如果创建切片，则必须位于createSlicefn内部。

import { createSlice } from '@reduxjs/toolkit';
const cardSlice = createSlice({
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

**为了获得良好的实践，您应该在｛｝内导出您的createCard，因为您需要创建更多的减速器，如删除、编辑等。

export const {createCard, futureReducers...} = cardSlice.actions