如何在同一个反应应用程序中使用 RTK 查询和 redux thunk？答案

【问题标题】：How to use RTK query and redux thunk in same react app?如何在同一个反应应用程序中使用 RTK 查询和 redux thunk？
【发布时间】：2022-01-06 10:44:58
【问题描述】：

我有一个要求，我必须使用 RTK 查询来获取数据，并使用 Redux-thunk 来进行全局状态管理。同样，我创建了 2 个独立的商店，一个用于 RTK，另一个用于 redux。现在我遇到了问题，因为我们的应用程序中不应该有 2 个商店。

商店 1：-

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import combineReducer from './combineReducer';

export const configureStore = () : any => {
  const middleWares = [thunk];
  const middlewareEnhancer = applyMiddleware(...middleWares);

  const enhancers = [middlewareEnhancer];
  const composedEnhancers: any = compose(...enhancers);

  const store = createStore(combineReducer, composedEnhancers);

  return store;
};

商店 2：-


import { configureStore } from "@reduxjs/toolkit";
import { setupListeners } from "@reduxjs/toolkit/query";
import { postApi } from "../services/posts";

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

setupListeners(store.dispatch);

App.tsx:-

const App: React.FC = () => (
  <Provider store={store}>
  <Provider store={rtkStore}>
    <Suspense fallback={<div>Loading...</div>}>
      <BrowserRouter>
        <Routes />
      </BrowserRouter>
    </Suspense>
  </Provider>
  </Provider>
);

我敢肯定，这其中有些可疑之处。任何需求的解决方案都将是可观的。

【问题讨论】：

标签： javascript reactjs redux rtk-query

【解决方案1】：

Redux Toolkit 默认带有 thunk。您无需进行设置。 RTK 查询内部基于 thunk。一个应用程序中不能有多个 Redux 存储。

只需使用configureStore 创建一个商店，还可以在那里添加您的其他减速器并将其用于所有事情。

一般来说，我们建议在Redux style guide 中为您的所有 Redux 逻辑使用 Redux Toolkit，因为像 createSlice 这样的帮助程序可以大量减少您的样板代码并防止最常见的错误。这是两年多来的默认建议。

如果您还没有阅读official Redux Essentials tutorial，我强烈建议您阅读。

【讨论】：