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

Question

我创建了一个商店和 authreducer，一切都按预期工作
但是当我在 app.js 中添加

useSelector

时，我收到此错误：

ERROR错误：找不到react-redux上下文值；请确保 该组件被包裹在

<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() {
  // the err is when I add this line even he works in other files
  const user = useSelector(state => state.auth.isAuthenticated);

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

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

Answer 1

除非您位于树中 Redux 提供者

下方

的组件中，否则无法使用 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 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);
  return user ? <Navigation /> : <Navigation2 />
}

您可以在此处阅读react context

Answer 2

亚当的答案是正确的解决方案，也是我建议的最佳选择。

还有 FWIW，您可能还想记住 Apollo 客户端（或在 ReactTree 之外声明它），以便将其作为稳定的参考提供。

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

const Navigation = () => {
  const user = useSelector(state => state.auth.isAuthenticated);

  return user ? <Navigation1 /> : <Navigation2 />;
}

export default function App() {
  const client = React.useMemo(() => {
    return new ApolloClient({
      uri: ".......serverUrl",
      cache: InMemoryCacheFct(),
      queryDeduplication: true,
    })
  }, []);

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

但也要指出，如果您不想创建一个“中间”组件只是为了读取用户状态，您也可以直接访问存储值。

示例：

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 = React.useMemo(() => {
    return new ApolloClient({
      uri: ".......serverUrl",
      cache: InMemoryCacheFct(),
      queryDeduplication: true,
    })
  }, []);

  return (
    <ApolloProvider client={client}>
      <Provider store={store}>
        {store.getState().auth.isAuthenticate
          ? <Navigation />
          : <Navigation2 />
        }
      </Provider>
    </ApolloProvider>
  );
}