为什么reducer函数只返回代理？还原/工具包

Question

状态参数（payload）中我的reducer函数返回唯一的代理：

Proxy {i: 0, A: {…}, P: false, I: false, D: {…}, …}
[[Handler]]: null
[[Target]]: null
[[IsRevoked]]: true

我的切片在哪里是状态代理：

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

export const userSlice = createSlice({
  name: "user",
  initialState: {
    currentUser: {
      loggined: false,
      isAdmin: false,
      jwt: false,
    },
  },
  reducers: {
    setUser: (state, payload) => {
      console.log(state); // here is problem, but payload works very well
    },
    clearUser: (state) => {},
  },
});
export const { setUser, clearUser } = userSlice.actions;

export const currentUser = (state) => state.user.currentUser;

export default userSlice.reducer;

这里是 redux 商店

import { configureStore } from "@reduxjs/toolkit";
import userReducer from "../features/user/userSlice";

export default configureStore({
  reducer: {
    user: userReducer,
  },
});

Answer 1

代理对象

Redux Toolkit 允许您通过使用 Immer 包来“改变”状态，以创建状态的代理草稿版本。你可以在你的 reducer 函数中安全地改变 state 变量，因为它是一个代理对象而不是真实状态。在幕后，您对代理的突变用于返回反映您的更改的状态的新副本。

当您console.log state 变量时，您会看到此代理。您需要使用Immer current function 即included in Redux Toolkit 来记录真实值。

import { createSlice, current } from "@reduxjs/toolkit"; 

reducers: {
  setUser: (state, action) => {
      console.log(action);
      console.log(current(state));
      state.currentUser = action.payload;
  },
}

动作与负载

请注意，reducer 的第二个参数是整个 action，而不仅仅是 payload。该操作是具有属性type 和payload 的对象。此操作对象是在使用有效负载调用 setUser 时自动创建的。

setUser({loggined: true, isAdmin: false, jwt: "some string"})

返回动作

{
  type: "user/setUser",
  payload: {
    loggined: true,
    isAdmin: false,
    jwt: "some string",
  }
}

您可以将减速器函数编写为setUser: (state, action) => 并访问action.payload，或者您可以将其解构为setUser: (state, {payload}) => 以获得payload 变量。