找不到 react-redux 上下文值；请确保组件包含在 <Provider> 中，即使它已经包含在提供者中

Posted 2023-02-22

【中文标题】找不到 react-redux 上下文值；请确保组件包含在 <Provider> 中，即使它已经包含在提供者中

【英文标题】：Could not find react-redux context value; please ensure the component is wrapped in a <Provider> even if already wrapped in a provider

【发布时间】：2021-07-04 11:57:43

【问题描述】：

我试图在我的根文件 (App.js) 中获取 firebase 中当前用户的 UID，但我遇到了关于 react-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.log(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文件吗

要么将您的<Provider> 放入App 组件的下一个相关组件中，要么在<App > 的子组件中执行firebase.auth

检查我的答案@learn2code 快乐编码:)

【参考方案1】：

App 必须包含在 provider 中，因为您在其中使用了 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.log(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;

【参考方案2】：

问题是你试图在你的主要组件中使用useDispatch，它没有被Provider包裹。您应该创建一个导航器或路由器组件并在其中完成它