Не удалось найти значение контекста response-redux; пожалуйста, убедитесь, что компонент заключен в <Provider>, даже если он уже заключен в провайдера

Я пытаюсь получить UID текущего пользователя в firebase в моем корневом файле (App.js), но я столкнулся с проблемой, связанной с response-redux, хотя я завернул Provider и установил хранилище. Кстати, я использую redux-toolkit. Что мне здесь не хватает? Спасибо за ответ.

Ниже мой App.js

import { StrictMode, useEffect } from 'react'
import { Provider } from 'react-redux';
import { useDispatch } from 'react-redux';
import { getCurrentUser } from 'store/slices/authSlice';
import store from 'store';
import routes from 'routes/routes';
import PrivateRoute from 'routes/PrivateRoutes';

const App = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        // User is signed in, see docs for a list of available properties
        // https://firebase.google.com/docs/reference/js/firebase.User
        var uid = user;
        console.info(uid);
        dispatch(getCurrentUser(uid))

      } else {
        // User is signed out
        // ...
      }
    });
  }, [dispatch]);

  return (
    <StrictMode>
      <Provider store = {store}>
         <Router>
            <Switch>
              {routes.map((route, i) => (
                route.auth ? (
                  <PrivateRoute
                    key = {i}
                    exact
                    path = {route.path}
                    component = {route.component}
                  />
                ) : (
                  <Route
                    key = {i}
                    exact
                    path = {route.path}
                    component = {route.component}
                  />
                )
              ))}
            </Switch>
          </Router>
      </Provider>
    </StrictMode>
  );
}

export default App;

Можете ли вы поделиться файлом store

RashedRahat 08.04.2021 18:21

Либо поместите ваш <Provider> в следующий компонент компонента App, либо сделайте firebase.auth в дочернем элементе <App >.

Dilshan 08.04.2021 18:27

Проверьте мой ответ @ learn2code Удачного кодирования :)

RashedRahat 08.04.2021 18:32
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
3
22
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Проблема в том, что вы пытаетесь использовать useDispatch в своем основном компоненте, который не упакован в Provider. Вы должны создать компонент навигатора или маршрутизатора и сделать это внутри него.

Ответ принят как подходящий

App должен быть заключен в провайдер, поскольку вы используете в нем useDispatch. Сейчас это всего лишь ребенок. Provider устанавливает контекст так, чтобы к нему могли иметь доступ только его дочерние элементы, но не родитель.

Пытаться:

import { StrictMode, useEffect } from 'react'
import { Provider } from 'react-redux';
import { useDispatch } from 'react-redux';
import { getCurrentUser } from 'store/slices/authSlice';
import store from 'store';
import routes from 'routes/routes';
import PrivateRoute from 'routes/PrivateRoutes';

const AppWrapper = () => {
  const store = createStore(rootReducer);

  return (
    <Provider store = {store}> // Set context
      <App /> // Now App has access to context
    </Provider>
  )
}

const App = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        // User is signed in, see docs for a list of available properties
        // https://firebase.google.com/docs/reference/js/firebase.User
        var uid = user;
        console.info(uid);
        dispatch(getCurrentUser(uid))

      } else {
        // User is signed out
        // ...
      }
    });
  }, [dispatch]);

  return (
    <StrictMode>
      <Provider store = {store}>
         <Router>
            <Switch>
              {routes.map((route, i) => (
                route.auth ? (
                  <PrivateRoute
                    key = {i}
                    exact
                    path = {route.path}
                    component = {route.component}
                  />
                ) : (
                  <Route
                    key = {i}
                    exact
                    path = {route.path}
                    component = {route.component}
                  />
                )
              ))}
            </Switch>
          </Router>
      </Provider>
    </StrictMode>
  );
}

export default App;

Другие вопросы по теме