时间戳

首页 > 解决方案 > 为什么reducer函数只返回代理？还原/工具包

reactjs - 为什么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,
  },
});

标签： reactjsreduxredux-toolkit

解决方案

代理对象

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

当你看到这个代理console.log的state变量时。您需要使用Redux Toolkit 中包含的Immercurrent函数来记录真实值。

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变量。

推荐阅读