Блог

Я пытаюсь интегрировать приложение React Toolkit в проект. Однако я получаю следующую ошибку.

Ошибка: Неверный вызов соединения. Крючки могут вызываться только внутри тела функционального компонента. Это может произойти по одной из следующих причин:

1. У вас могут быть несовпадающие версии React и средства визуализации (например, React DOM).
2. Возможно, вы нарушаете Правила Крючков
3. У вас может быть более одной копии React в одном приложении см. https://reactjs.org/link/invalid-hook-call для получения советов о том, как отладить и устранить эту проблему.

store.js

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

export const store = configureStore({
  reducer: {},
})
 

index.js

 ReactDOM.render(
  <EventTemplateProvider>
    <AuthState>
      <SetStripeLayout>
        <EventState>
          <TicketState>
            <AlertState>
              <Provider store={store}>   <===== Provider
                <BrowserRouter>
                  <Suspense fallback={<Spinner />}>
                    <Switch>
                      <Route
                        exact
                        path="/"
                        render={(props) => <App {...props} />}
                      />
                      <PrivateRoute
                        path="/dashboard"
                        render={(props) => <Dashboard {...props} />}
                      />
                      <PrivateRoute
                        path="/template"
                        render={(props) => <EventTemplate {...props} />}
                      />
                      <PrivateRoute
                        path="/events"
                        render={(props) => <Events {...props} />}
                      />
                      <AdminRoute
                        path="/admin"
                        render={(props) => <AdminLayout {...props} />}
                      />
                      <Route
                        path="/readmore/:id"
                        render={(props) => <VirtualEventReadMore {...props} />}
                      />
                      <Route
                        path="/*"
                        render={(props) => <Error404 {...props} />}
                      />
                      <Redirect from="/" to="/" />
                    </Switch>
                  </Suspense>
                </BrowserRouter>
              </Provider>
            </AlertState>
          </TicketState>
        </EventState>
      </SetStripeLayout>
    </AuthState>
  </EventTemplateProvider>,
  document.getElementById("root")
);
 

Я ничего не начинал кодировать для redux.
и когда я удаляю тег поставщика, приложение работает.

Кто-нибудь может сказать мне, почему он разваливается на части?

Заранее спасибо.

изменено index.js

 import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store';

ReactDOM.render(
  <Provider store={store}>
    <h1>Hello </h1>
  </Provider>
, document.getElementById('root'));