reactjs - RTK查询错误: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

Question

所以这就是问题所在，我目前正在开发具有不同 redux-toolkit 版本的 monorepo 应用程序，每当我混合版本时，应用程序就会崩溃并出现以下问题，我确实让我的应用程序的提供商对其进行了设置(它按预期工作，但由于我运行yarn-deduplicate && yarn install应用程序开始显示该问题)

当我开始解决问题时，我评论 RTK 查询 api Hook ，并且应用程序按预期运行

这是我的应用程序的 index.ts 文件顶层

/**
 * This is the entry file for the application, only setup and boilerplate code.
 */
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';


import App from './common/app/App';
import { store } from './common/store/store';


const render = () => {
  ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter basename={'/'}>
          <App />
        </BrowserRouter>
    </Provider>,
    document.getElementById('app'),
  );
};

render();

这是我的商店

    import { configureStore } from '@reduxjs/toolkit';
    import { api } from './api';
    import apiReducer from './apislice';
    
    export const store = configureStore({
      reducer: {
        apiState: apireducer,
        [api.reducerPath]: api.reducer,
      },
      middleware: (gDM) => gDM().concat(api.middleware)
    });
    
    export type RootState = ReturnType<typeof store.getState>;

这是我的 api，因为这是一个私有(private)项目，我模拟了该文件

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


const settings = { 'Content-Type': 'application/json' };
const apiUrl = '/test-api/';

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/some-url/' }),
  tagTypes: ['testing'],
  endpoints: (builder) => ({
    fetchAll: builder.query({
      query: () => `${apiUrl}/page/fetchAll`,
      providesTags: ['testing'],
    }),

  }),
});

// Export hooks for usage in functional components, which are
// auto-generated based on the defined endpoints
export const {

  useFetchAllQuery,

} = api;

应用程序.js

/* eslint-disable */
import React from 'react';
import { useFetchAllQuery } from '../store/api';

const App = () => {
  const { isFetching, isError } = useFetchAllQuery();
  console.log(isFetching)
  console.log(isError)
  return (
    <>
      <h1>Hello</h1>
    </>
  );
};

export default App;

所以 redux 在第一次 RTK 查询调用时崩溃，如果我评论 api，我可以毫无问题地使用 redux 存储

版本: "@reduxjs/toolkit": "^1.8.5", “react-redux”:“^8.0.2”，

我已经处理了这两天希望有人能帮助我

Answer 1

正如 @xixe 指出的，这里的修复是确保您的 react-redux 版本与 @reduxjs/toolkit 相同。他们在文档中没有提到这一点，所以我认为这会有所帮助。

编辑:我已经打开an issue for this in reduxjs/react-toolkit