RTK 查询停留在“加载”state

Question

我有一个 RTK 查询，它在登录后从后端返回用户信息。我还创建了一个切片缩减器，它获取 RTK 查询的有效负载（来自后端的登录调用）并将用户信息、令牌存储在一个状态（redux-toolkit ）。 一切正常，直到我使用 ExtraReducers 更新 state。 如果我包含state.token= payload.token payload.token ，则 RTK 查询会卡在“加载” state 处，删除该行后，一切正常（我可以通过选择“用户”减速器访问有效负载）。 我希望将用户令牌存储在用户切片中，以便我可以在标头中访问它并将其发送回后端。 谁能解释为什么会这样？

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 减速器（或任何浸入式 function 中），您可以返回一个新值，或修改state 。 同时做这两件事没有任何意义。

所以你可能想跳过return语句并做

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