Redux-Toolkit报错：Cannot read properties of undefined (reading 'type') 求助

文件夹结构 #

BookSlice代码 #

import { createSlice } from "@reduxjs/toolkit"

const initialState={
    books:[
        {id:"1", name:"Data Structure", author:"motalib"},
        {id:"2", name:"Structure", author:"hossain"},
        {id:"3", name:"Structure", author:"shamim"},
    ]
}

export const bookSlice=createSlice({
    name:"books",
    initialState:initialState,
    reducers:{
        showBook:(state)=>state,
        AddBooks:(state,action)=>{
            state.books.push(action.payload);
        }
    },
})

export const {showBook, AddBooks}=bookSlice.actions;
export default bookSlice.reducer;

store代码 #

import { configureStore } from "@reduxjs/toolkit";
import bookReducer from "../Features/BookSlice";

const store=configureStore({
    reducer:{
        bookReducer:bookReducer
    }
})
export default store

触发报错的dispatch代码 #

提交表单时触发报错：

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import AddBooks from "../Features/BookSlice"

const AddBook = () => {
    const dispatch=useDispatch()
    const [book, setBook]=useState({
        id:'',
        name:"",
        author:""
    })

    const HandelChange=(e)=>{
        const {name, value}=e.target
        setBook((prev)=>{
            return{...prev, [name]:value}
        })
    }
    console.log(book);
    const HandleSubmit = (e) => {
        e.preventDefault();
        dispatch(AddBooks(book))
        e.target.reset()
        console.log(book);

    }
return(
    // HTML表单代码
);
};

错误原因是导入AddBooks的方式错误：你当前用默认导入的方式，导入的是整个slice的reducer，而非需要的action creator函数。

修改AddBook组件里的导入语句，改用命名导入：

import { AddBooks } from "../Features/BookSlice"

这样导入的才是bookSlice.actions导出的action creator，dispatch时会生成包含type属性的合法action对象，即可解决该错误。

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