React Native中Redux Toolkit登录切片(loginSlice)实现正确性咨询

你的代码存在几处明显错误，下面逐一说明并给出正确实现：

主要问题点 #

• 错误访问state属性：state是包含email和password的对象，应该用state.email、state.password直接访问，而非email.value
• payload赋值逻辑不合理：登录操作需要分别接收邮箱和密码，原代码将两个字段都赋值为同一个action.payload，无法区分两个值
• 语法错误：reducer内语句结尾误用逗号，应使用分号或换行分隔

修正后的loginSlice代码 #

import { createSlice } from '@reduxjs/toolkit'

const loginSlice = createSlice({
    name: "login",
    initialState: {
        email: "",
        password: ""
    },
    reducers: {
        onLogin: (state, action) => {
          // 从payload中解构出邮箱和密码
          const { email, password } = action.payload;
          // Redux Toolkit的Immer允许直接修改state，会自动转为不可变更新
          state.email = email;
          state.password = password;
        },
        // 可选：添加重置登录状态的reducer
        resetLoginState: (state) => {
          state.email = "";
          state.password = "";
        }
    }
})

export const { onLogin, resetLoginState } = loginSlice.actions
export default loginSlice.reducer

使用示例 #

触发onLogin action时，需传入包含邮箱和密码的对象作为payload：

dispatch(onLogin({ email: 'user@example.com', password: 'yourpassword' }))

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