如何在Redux Toolkit的slice中向action传递对象参数

1 先修正authSlice的代码 #

你当前注释了action.payload的解构逻辑，直接使用userId、userNickame会抛出变量未定义的报错，首先放开注释完成参数解构：

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

const initialState = {
    userId : null,
    // 注意此处字段拼写是userNickame（少了一个n），如果是笔误建议统一改为userNickname，避免后续取值不匹配
    userNickame : "",
    isAuth : false,
    isAdmin : false, 
}

export const authSlice = createSlice({
    name : 'auth',
    initialState,
    reducers : {
        authUser : (state, action) => {
            // 放开此处注释，从payload读取传入的参数
            const {userId, userNickame} = action.payload;
            state.userId = userId;
            state.userNickame = userNickame;
            state.isAuth = true;
        },
    },
})

export const { authUser } = authSlice.actions
export default authSlice.reducer

2 调用dispatch时的传参写法 #

Redux Toolkit的action creator默认仅接收一个参数作为payload，所以你需要把两个参数封装为一个对象传入即可，同时注意你的useSelector取值路径需要匹配slice的命名：

//...

const dispatch = useDispatch();
// slice的name是auth，所以取值路径需要加上auth层级
const userId = useSelector((state) => state.auth.userId);
const userNickname = useSelector((state) => state.auth.userNickame);

//...

// 传入包含两个属性的对象作为payload
dispatch(authUser({
  userId: userId,
  userNickame: userNickname
  // 如果前面修正了字段拼写为userNickname，这里的key也要对应改为userNickname
}));

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