Error "Uncaught Error: could not find react-redux context value; please ensure the component is wrapped in a " thrown while it is wrapped

Question

I receive subject error when try to add some functionalities of tan stack query to existing and working application. Here is the structure of basic files:

index.tsx (main index file):

ReactDOM.render(
  <AppProvider>
    <App />
  </AppProvider>,

  document.getElementById("root")
);

App.tsx

const App = () => {
  breakWhenInternetExplorer();
  const isAPIKeyAvailable = useCheckApiKey();
  const location = useLocation();
  if (!isAPIKeyAvailable) return null;

  return (
    <main>
      <Routes>
        <Route path={ROUTES.LANDING} element={<LandingPage />} />
        <Route path={ROUTES.SEARCH} element={<SearchPage />} />
        {location?.state?.results && (
          <Route path={"/" + location.state.results} element={<WeatherInformationsPage />} />
        )}
        <Route path={ROUTES.NOPAGE} element={<NoPage />} />
      </Routes>
    </main>
  );
};
export default withProblemMessage(App);

AppProvider.tsx is as follows:

const AppProvider: FC = ({ children }) => {
  // const queryClient = useQueryClient();
  return (
    <Provider store={store}>
      <QueryClientProvider client={useQueryClient()}>
        <StyledEngineProvider injectFirst>
          <ThemeProvider theme={theme}>
            <SnackbarProvider
              maxSnack={3}
              anchorOrigin={{
                vertical: "bottom",
                horizontal: "center",
              }}
            >
              <PlaceContextProvider>
                <CheckSupportForLocalStorage>
                  <CheckSupportForGeolocation>
                    <SetBackground>
                      <Router>{children}</Router>
                    </SetBackground>
                  </CheckSupportForGeolocation>
                </CheckSupportForLocalStorage>
              </PlaceContextProvider>
            </SnackbarProvider>
          </ThemeProvider>
        </StyledEngineProvider>
      </QueryClientProvider>
    </Provider>
  );
};

and the most important part-useQueryClient.ts

const useQueryClient = () => {
  const { showErrorMessage } = useDispatchAction();
  const queryErrorHandler = (err: unknown): void => {
    const axiosError = err as AxiosError;
    showErrorMessage(axiosError)
  };

  const defaultQueryClientOptions = {
    queries: {
      onError: queryErrorHandler,
      retry: false,
      cacheTime: 1.1 * (60 * 1000),
      refetchOnMount: false,
      refetchOnWindowFocus: false,
      staleTime: 1 * (60 * 1000),
      refetchInterval: 1 * (60 * 1000),
    },
  };

  return new QueryClient({
    defaultOptions: defaultQueryClientOptions,
  });
};

The problem appears when I try to add...

 const { showErrorMessage } = useDispatchAction();

...to useQueryClient.ts. Without it (and without actual dispatching of that action) the app works fine. And, do not understand what happens. Previously, useQueryClient.ts has been called outside indeed (see commented code), but now is surely within.

Error "Uncaught Error: could not find react-redux context value; please ensure the component is wrapped in a " thrown while it is wrapped

0 Answers0