为什么reducer函数只返回代理?回来的/工具包

Question

我的reducer函数在状态参数(payload)中返回唯一代理:

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

My slice where is state proxy:

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 store

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.logstate变量时，您将看到此代理。您需要使用Redux Toolkit中包含的Immercurrent函数来记录真实值。

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

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

动作vs有效载荷

请注意，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",
}
}

你可以把你的reducer函数写成setUser: (state, action) =>来访问action.payload，或者你可以把它解构成setUser: (state, {payload}) =>来获取payload变量。