使用Redux Toolkit时状态更新失败的问题排查与解决

我刚接触Redux和Redux Toolkit，折腾了好几个小时。开发的注册表单提交后，MongoDB后端数据能正常更新，但Redux中的状态始终无法更新，找不到原因。

appApi.js

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const appApi = createApi({
  reducerPath: 'appApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:8001' }),
  endpoints: builder => ({
    signup: builder.mutation({
      query: user => ({
        url: '/users/signup',
        method: 'POST',
        body: user,
      }),
    }),

    login: builder.mutation({
      query: user => ({
        url: '/users/login',
        method: 'post',
        body: user,
      }),
    }),
  }),
});

export const { useSignupMutation, useLoginMutation } = appApi;

export default appApi;

userSlice.js

import { createSlice } from '@reduxjs/toolkit';
import appApi from '../services/appApi';

const initialState = null;

export const userSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {},
  extraReducers: builder => {
    builder.addMatcher(
      appApi.endpoints.signup.matchFulfilled,
      (_, { payload }) => {
        console.log(_); // 为什么是null？
        console.log(payload); // 为什么是null？
        return payload;
      }
    );
    builder.addMatcher(
      appApi.endpoints.login.matchFulfilled,
      (_, { payload }) => payload
    );
  },
});

export default userSlice.reducer;

问题已解决 #

前端代码无问题，问题出在后端的用户模型文件中——忘记给user.toObject加上调用括号()。

错误代码

UserSchema.methods.toJSON = function () {
  const user = this;
  const userObject = user.toObject; <----- 问题所在
  delete userObject.password;

  return userObject;
}

正确写法：

UserSchema.methods.toJSON = function () {
  const user = this;
  const userObject = user.toObject(); // 添加括号调用方法
  delete userObject.password;

  return userObject;
}

内容的提问来源于stack exchange，提问作者react learn