redux RTK查询extraReducers:未捕获的类型错误:无法读取undefined的属性(阅读“matchFulfilled”)

ui7jx7zq  于 2023-03-30  发布在  其他
关注(0)|答案(1)|浏览(118)

我正在使用RTK和RTK查询在我的应用程序中进行状态管理和数据提取。我的商店是通过代码分割设置的,我在应用程序Uncaught TypeError: Cannot read property 'matchFulfilled' of undefined的初始加载时收到以下与storeNew/authSliceNew.js中定义的extraReducer相关的错误
到目前为止,我意识到,如果我在storeNew/authSliceNew.js中注解掉我的extraReducers,重新加载应用程序,然后取消注解,它们似乎可以工作。但是如果我从一开始就取消注解,我会得到错误。我试图找到一个解决方案,但到现在为止已经有几个小时了,但找不到任何有用的东西。所以如果有人能给我指出正确的方向,我会很高兴。
我的storeNew/baseApi.js

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

export const baseApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: "api/" }),
  endpoints: () => ({}),
  tagTypes: ["User", "Budget"],
});

我的storeNew/authApiNew.js

import { baseApi } from "./baseApi";

const authApi = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    registerUser: builder.mutation({
      query: (registerCredentials) => ({
        url: "account/register",
        method: "POST",
        body: { ...registerCredentials },
      }),
    }),
  }),
  overrideExisting: false,
});

export const {
  useRegisterUserMutation,
} = authApi;

我的storeNew/authSliceNew.js

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

const initialState = {
  isAuthenticated: false,
  register_success: false,
  feedback: null,
  feedbackType: null,
};

const authSlice = createSlice({
  name: "auth",
  initialState: initialState,
  reducers: {
    resetFeedback: (state) => {
      state.feedback = null;
      state.feedbackType = null;
    },
    resetRegisterSuccess: (state) => {
      state.register_success = false;
    },
  },

  extraReducers: (builder) => {
    builder.addMatcher(
      baseApi.endpoints.registerUser.matchFulfilled,
      (state) => {
        state.register_success = true;
        state.feedback = null;
        state.feedbackType = null;
      }
    );
  },
});

export const authActions = authSlice.actions;

export default authSlice;

我的storeNew/index.js

import { configureStore } from "@reduxjs/toolkit";
import { setupListeners } from "@reduxjs/toolkit/query";
import { baseApi } from "./baseApi";
import authSliceNew from "./authSliceNew";

const store = configureStore({
  reducer: {
    [baseApi.reducerPath]: baseApi.reducer,
    authNew: authSliceNew.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(baseApi.middleware),
});

setupListeners(store.dispatch);

export default store;
bprjcwpo

bprjcwpo1#

如果您在此处访问baseApi.endpoints.registerUser.matchFulfilled,则无法保证registerUser端点已在该时间点注入(即:注入它的文件已经被包括)。
导出authApi,并使用authApi.endpoints.registerUser.matchFulfilled
authApibaseApi是同一个对象(字面意思是对同一个对象的引用!),但是在authApi对你可用的时候,你可以保证已经对registerUser进行了injectEndpoints调用。

相关问题