RTK查询停留在“加载”状态

Question

我有一个RTK查询，它在登录后从后端返回用户信息。我还创建了一个片还原器，它接受RTK查询的有效负载(从后端登录调用)并将用户信息存储在状态中(redux-工具箱)。一切都很好，直到我使用ExtraReducers更新状态为止。如果我包括state.token= payload.token，RTK查询就会陷入“加载”状态，在删除行时，一切正常(我可以通过选择“用户”还原器来访问有效负载)。我希望用户令牌存储在用户片中，这样我就可以在头文件中访问它，并将它发送回后端。有人能解释为什么会发生这种事吗？

import { createSlice } from "@reduxjs/toolkit";
import authService from "../Services/authService";

const initialState = {
  token: null,
};

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    userLogin: (state, action) => {
    },
  },
  extraReducers: (builder) => {
    builder.addMatcher(
      authService.endpoints.authLogin.matchFulfilled,
      (state, { payload }) => {
        localStorage.setItem("userToken", payload.token);
        state.token = payload.token;
        return payload;
      }
    );
  },
});

export const { userLogin } = userSlice.actions;

export default userSlice.reducer;

Answer 1

很可能您正在忽略的控制台上有一条错误消息。

在RTK还原器(或一般情况下的任何沉浸函数)中，您可以返回一个新值，或修改state。同时做这两件事都没有任何意义。

所以您可能想跳过return语句并执行以下操作

    builder.addMatcher(
      authService.endpoints.authLogin.matchFulfilled,
      (state, { payload }) => {
        localStorage.setItem("userToken", payload.token);
        state.token = payload.token;
      }