React-Redux在使用useSelector时找不到react-redux上下文值

Question

我创建了一个商店和 authreducer，每一个都按预期工作
但是当我在 app .js 中添加 use sellector 时，我得到了这个错误

ERROR  Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>  

（我尝试在其他文件中使用useSelector，没有任何错误。）

import { ApolloClient, ApolloProvider } from "@apollo/client";
import { Provider, useSelector } from "react-redux";
import Navigation from "./navigation";
import Navigation2 from "./navigation2";
import { store } from "./src/Redux/store";
import InMemoryCacheFct from "./src/apolloClient/InMemoryCache";

export default function App() {

  const user = useSelector(state => state.auth.isAuthenticated);// the err is when i add this line even he works in other files

  const client = new ApolloClient({
    uri: ".......serverUrl",
    cache: InMemoryCacheFct(),
    queryDeduplication: true,
  });

  return (
    <ApolloProvider client={client}>
      <Provider store={store}>
        {user ? <Navigation /> : <Navigation2 />}
      </Provider>
    </ApolloProvider>
  );
}

Answer 1

这个很简单，你不能使用

useSelector

，除非你位于树中 Redux 提供者下方的组件中。

你可以这样做：

import { ApolloClient, ApolloProvider } from "@apollo/client";
import { Provider, useSelector } from "react-redux";
import Navigation from "./navigation";
import Navigation2 from "./navigation2";
import { store } from "./src/Redux/store";
import InMemoryCacheFct from "./src/apolloClient/InMemoryCache";

export default function App() {

  const client = new ApolloClient({
    uri: ".......serverUrl",
    cache: InMemoryCacheFct(),
    queryDeduplication: true,
  });

  return (
    <ApolloProvider client={client}>
      <Provider store={store}>
        <Root />
      </Provider>
    </ApolloProvider>
  );
}

function Root() {
  const user = useSelector(state => state.auth.isAuthenticated);// the err is when i add this line even he works in other files
  return user ? <Navigation /> : <Navigation2 />
}