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

IT技术 reactjs redux redux-toolkit
2021-04-28 08:44:27

我在 state 参数（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,
  },
});
1个回答

代理对象

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

当您console.log使用state变量时，您会看到此代理。您需要使用音麦current功能，它包含在终极版工具包，以日志的真正value。

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

其它你可能感兴趣的问题
上一篇循环多个数组并对相同键的值求和 下一篇React 中可重用的 TextField