React-Redux教程学习遇阻：解构login函数触发TypeError错误

问题根源 #

1. 导出对象搞错了：你试图从userslice.reducers解构login，但Redux Toolkit中，createSlice自动生成的action creators是存放在userslice.actions里的，reducers字段只是内部存储的reducer函数集合，不能直接用来导出可调用的action。
2. State结构不匹配：你的初始state是{ name: "", email: "", age: "" }，但login reducer里给state.value赋值——初始state根本没有value属性，这会导致state数据结构混乱。

修正后的代码 #

//src/components/features/user.js
import { createSlice } from '@reduxjs/toolkit'

const userslice = createSlice({
    name: "user",
    initialState: { name: "", email: "", age: "" },
    reducers: {
        login: (state, action) => {
            // 用Object.assign把payload的属性合并到state，匹配初始结构
            Object.assign(state, action.payload);
            // 也可以逐个赋值，更直观：
            // state.name = action.payload.name;
            // state.email = action.payload.email;
            // state.age = action.payload.age;
        }
    }
})

// 正确从actions里导出login action creator
export const { login } = userslice.actions
// 导出slice的reducer，用于在store中注册
export default userslice.reducer

额外说明 #

• 当你在组件里调用login(payload)时，这个action creator会生成类型为user/login的action，Redux会自动匹配到你定义的login reducer执行状态更新。
• Redux Toolkit允许直接修改state（比如上面的state.name = ...），是因为内部用Immer库处理了不可变更新，不用手动返回新对象。

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