如何在 React 应用程序中将 redux 和 apollo 客户端连接在一起答案

【问题标题】：How to connect redux and apollo client together in a react app如何在 React 应用程序中将 redux 和 apollo 客户端连接在一起
【发布时间】：2021-07-07 23:02:02
【问题描述】：

我正在做一个项目，我正在使用 apollo/client、graphql in react，对于全局状态管理，我喜欢使用 redux，但是，在你对我说之前，我到底为什么要使用redux 的原因，是因为我必须在登录/注册中处理用户的数据，所以我可以把它放在 localStorage 中，但不仅如此，我很确定我必须处理我的项目中有更多数据，所以我会把它放在我的商店中。

所以，从字面上看，我的问题是，如何将 redux 与 apollo 客户端一起使用，这样我就可以使用 graphql 轻松获取数据，如果我必须存储数据，我可以正常进行

我在文档中看到了这种方式，但它对我不起作用，浏览器对我很生气并给出错误，redux 设置中没有提供提供程序

import React from "react";
import App from "./App";

import { createStore } from "redux";
import reducer from "./reducer";

import {
  createHttpLink,
  InMemoryCache,
  ApolloProvider,
  ApolloClient
} from "@apollo/client";

const httpLink = createHttpLink({
  uri: "http://localhost:5000"
});

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache()
});

const store = createStore(reducer);

export default (
  <ApolloProvider client={client} store={store}>
    <App />
  </ApolloProvider>
);

所以，我决定将代码的 las 部分改为这个，它确实有效

<ApolloProvider client={client}>
    <Provider store={store}>
      <App />
    </Provider>
  </ApolloProvider>

但是如果你去设置，你会看到 ApolloProvider 的孩子是提供者

那么，这会导致问题吗？这是连接 redux 和 apollo/client 的最佳方式吗？

如果你能帮我连接redux和apollo/client，让我可以正常使用，你就是最棒的！

感谢您的宝贵时间！ .

【问题讨论】：

标签： reactjs redux react-redux graphql

【解决方案1】：

您并没有真正“将它们连接在一起”。你两个都用。它有效。但是他们没有任何真正的互动，因为他们彼此不认识——而且他们也真的不需要任何互动。你在那里做的事情，嵌套不同的提供者，完全没问题，并且在大多数应用程序中都可以完成。但正如我所说，这不会以任何方式“连接”它们；）

【讨论】：