管理 Redux 和 Apollo 的商店答案

【问题标题】：Managing the stores of Redux and Apollo管理 Redux 和 Apollo 的商店
【发布时间】：2018-09-14 18:10:20
【问题描述】：

我正在尝试将 Apollo 客户端 (graphql) 集成到我已经使用 reactjs 和 redux 开发的应用程序中。

根据我得到的信息，Apollo 客户端有一个商店，而 redux 也有一个。

在应用程序中使用 2 个商店是否很好？可以只有一家店吗？

【问题讨论】：

标签： redux graphql apollo react-apollo

【解决方案1】：

Apollo Store 将直接与 GraphQL 服务器通信并存储从它返回的数据。 Apollo Store 是来自 GraphQL 服务器的所有数据的客户端存储库。

我确实相信只使用一个是可能的，我也相信你应该只使用一个 Store，并且那个 Store 应该是 Apollo Store，因为它是与 GraphQL 通信并将数据拉入你的 React 应用程序的东西。

因此，如果在您的 index.js 文件中，您当前有这个：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from './components/App';

const store = createStore(() => [], {}, applyMiddleware());

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.querySelector('#root')
);

我想您必须将其重构为：

import React from 'react';
import ReactDOM from 'react-dom';
import ApolloClient from 'apollo-client';
import { ApolloProvider } from 'react-apollo';

import App from './components/App';

const client = new ApolloClient({});

ReactDOM.render(
      <ApolloProvider client={client}>
        <App />
      </ApolloProvider>,
      document.querySelector('#root')
    );

【讨论】：