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

Posted 2023-03-16

【中文标题】为啥reducer函数只返回代理？还原/工具包

【英文标题】：Why reducer function return only proxy? redux/toolkit为什么reducer函数只返回代理？还原/工具包

【发布时间】：2021-04-22 03:48:06

【问题描述】：

状态参数（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,
  ,
);

【问题讨论】：

您的 reducer 不会对状态做任何事情，它们不会返回新状态或（根据 redux 工具包的建议）“改变”状态 immer 草案。

这能回答你的问题吗？ Redux Toolkit - I can't update Slice state?

谢谢，伙计们，你能读一下吗：***.com/questions/65765280/…

【参考方案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 变量。