redux - 将 RTK 查询与 Redux Persistor 结合使用

Question

在花费了大量时间尝试单独解决这个问题之后，我想向你们寻求帮助。我已经阅读了很多与此相关的问题，但找不到任何有用的内容。我正在尝试使用 persistor 配置我的商店和RTK Query 。 这是我的 index.js 文件，我正在其中尝试配置商店

const persistConfig = { key: "root", storage, version: 1 };

const persistReducers = persistReducer(persistConfig, authReducer);

const store = configureStore({
  reducer: {
    [customApi.reducerPath]: customApi.reducer,
     persistReducers,
  },

  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }).concat(customApi.middleware),
});
setupListeners(store.dispatch);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistStore(store)}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>
);

这是我的RTK Query

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import { REHYDRATE } from "redux-persist";

export const customApi = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: process.env.REACT_BASE_URL }),
  reducerPath: "customApi",
  tagTypes: ["RuralProjects"],
  endpoints: (build) => ({
    getRuralProjects: build.query({
      query: () => "projects/ruralProjects",
      providesTags: ["RuralProjects"],
    }),
  }),
});

export const { useGetRuralProjectsQuery } = customApi;

这是我的authReducer

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

const initialState = {
  user: null,
  token: null,
};

export const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    setLogin: (state, action) => {
      state.user = action.payload.user;
      state.token = action.payload.token;
    },
    setLogout: (state) => {
      state.user = null;
      state.token = null;
    },
  },
});

export const { setLogin, setLogout } = authSlice.actions;
export default authSlice.reducer;

问题是没有配置 RTK Query在store我的应用程序正在运行。我的问题是如何使用 persistor和RTK Query同时？任何帮助将不胜感激!

当我同时使用 redux persistor 时，如何配置商店和RTK Query

Answer 1

据我所知，代码已经同时使用 RTKQ 和 redux-persist...所以我猜测您确实想问一个不同的问题。如果我是正确的，您似乎想要合并并保留 customApi 切片以及 authSlice 状态。

import { Provider } from "react-redux";
import { configureStore, combineReducers } from "@reduxjs/toolkit";
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";
import { PersistGate } from "redux-persist/integration/react";
import storage from "redux-persist/lib/storage";
import authReducer from "../authSlice";
import { customApi } from "../customApi";

// Combine all slice reducers into a single root reducer
const rootReducer = combineReducers({
  [customApi.reducerPath]: customApi.reducer,
  auth: authReducer,
});

const persistConfig = { key: "root", storage, version: 1 };

const reduxPersistActions = [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER];

// Persist the root reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [...reduxPersistActions],
      },
    }).concat(customApi.middleware),
});

setupListeners(store.dispatch);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistStore(store)}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>
);