RTK 查询和 createSlice 额外的缩减器

Question

我是 RTK 查询的新手，目前正在观看一个教程，其中 RTK 查询数据使用 ExtraReducers 存储在 redux 切片中。我试图将 RTK 查询数据存储在切片状态中，但无法这样做。

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

const initialState = {
  userInfo: null,
};

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    userLogout: (state, action) => initialState,
  },
  extraReducers: (builder) => {
    builder.addMatcher(
      apiService.endpoints.authRegister.matchFulfilled,
      (state, action) => (state.userInfo = action.payload)
    );
    builder.addMatcher(
      apiService.endpoints.authLogin.matchFulfilled,
      (state, action) => (state.userInfo = action.payload)
    );
  },
});

export const { userLogout } = userSlice.actions;

export default userSlice.reducer;

无论我做什么，状态都不会使用有效负载值进行更新，并且状态中的 userInfo 始终保持为空。

如果我像这样编写逻辑，一切都会神奇地工作正常，并且切片会存储来自 RTK 查询的值。

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

const initialState = null;

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    userLogout: (state, action) => initialState,
  },
  extraReducers: (builder) => {
    builder.addMatcher(
      apiService.endpoints.authRegister.matchFulfilled,
      (_, action) => action.payload
    );
    builder.addMatcher(
      apiService.endpoints.authLogin.matchFulfilled,
      (_, action) => action.payload
    );
  },
});

export const { userLogout } = userSlice.actions;

export default userSlice.reducer;

state,action如果我在 extraReducers 中提到状态，即 ( )， 则切片不会存储任何信息。开发工具apiService/executeMutation/pending自始至终都在说，状态永远不会更新。一旦我删除状态并放入 _ ，请求就会得到满足，我就会得到数据。

切片存储的信息如果我写成( _,action)。为什么会出现这种情况？任何想法？

编辑：从前端分派操作也不起作用。我尝试在切片中定义初始状态并登录（通过使用（_,action））。我从 addMatcher 获取结果，并且切片使用新的 userInfo 进行更新。当发生这种情况时，开发工具没有显示我定义的初始状态的痕迹。开发工具仅显示用户数据，没有任何状态信息（如果代码是以后一种方式编写的）。尽管初始状态有 userInfo( initialState:{userInfo:null}，但 devtools 没有显示它。只显示 addMatcher 的结果（就好像初始状态根本不存在一样）

Image 1- prod slice

Despite the initialState having products:[], and name:'', it appears to have disappeared in redux Dev tools and instead I only get the name of the slice and the api result(from the addMatcher)

这是RTK查询代码

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

const apiService = createApi({
  reducerPath: "fakeStore",
  baseQuery: fetchBaseQuery({ baseUrl: "https://fakestoreapi.com/" }),
  endpoints: (builder) => ({
    getProd: builder.query({
      query: () => ({
        url: "products",
        method: "GET",
      }),
    }),
  }),
});

export default apiService;

export const { useGetProdQuery } = apiService;

店铺

import { configureStore } from "@reduxjs/toolkit";
import prodReducer from "./prodSlice";
import apiService from "./service";

export const store = configureStore({
  reducer: {
    prod: prodReducer,
    [apiService.reducerPath]: apiService.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiService.middleware),
});

问题是，我无法通过说state.products=action.payload是否包含 addMatcher 来更新切片中的状态（因为，initialState 消失，并且 addMatcher 永远保持加载(state,action)=>action.payload状态）。如果我只是说整个 initialState 消失，并且我从添加匹配器。

Answer 1

您不必将 rtk 查询的数据存储到任何地方。useGetProdQuery您只需在组件中导入并像这样使用它

const {data, isLoading, isFetching, error} = useGetProdQuery()