使用 Redux 时访问应用程序范围的客户端？答案

【问题标题】：Access application wide client when using Redux?使用 Redux 时访问应用程序范围的客户端？
【发布时间】：2019-03-07 09:45:33
【问题描述】：

我使用 Redux 管理状态，使用 Apollo 执行 graphQL 查询。

我创建了一个可以从各种 React 组件访问的 Apollo 客户端。

import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

const link = new HttpLink({
    uri: getGraphqlEndpointUrl,
    headers: {
        'x-api-key': getApiKey(),
        'Authorization': jwtToken,
    },
});
const client = new ApolloClient({
    link: link,
    cache: new InMemoryCache(),
});

如何使用 Redux 做到这一点？我是否将客户端存储在 Redux 存储中的变量中？这对我来说似乎有点奇怪，但并非不合理。还有更好的方法吗？

【问题讨论】：

标签： redux react-redux apollo react-apollo

【解决方案1】：

只有可序列化的对象才能通过 redux 存储——函数或将函数作为属性的对象不属于 redux 存储。如果您需要在 React 应用程序的组件层次结构之外引用 Apollo 客户端，只需创建一个导出客户端对象本身的模块（不是创建客户端的函数）。然后，您可以在任何地方导入客户端（包括包含您的 ApolloProvider 的代码），并且您的所有代码都将指向客户端的同一实例（以及相同的缓存）。

您的客户端模块导出实例化客户端本身很重要——如果您导出创建客户端的函数，您将在每次导入时重新创建它。

【讨论】：