如何在同一个 React 应用程序中将 redux 和 graphql 与 apollo 客户端一起使用？

Question

我正在做一个项目，我正在使用 apollo/client，react 中的 graphql，而对于全局状态管理，我必须使用 redux。我很确定我必须在我的项目中处理更多数据，所以我会把它放在我的商店里。 我想知道如何使用 apollo 客户端进行 redux 操作以从 graphql 端点获取数据

第一部分是我设置 apollo 客户端的 index.js。

    import React from "react";
    import ReactDOM from "react-dom";
    import App from './App.jsx';
    import {BrowserRouter} from "react-router-dom";
    import store from "./store";
    import { Provider } from "react-redux";
    import ApolloClient from 'apollo-boost';
    import { ApolloProvider } from 'react-apollo';
    import {InMemoryCache} from "@apollo/client";
    
     const client = new ApolloClient({
        uri: 'http://localhost:4000/graphql',
        cache: new InMemoryCache()
      });
    
    ReactDOM.render(
        <React.StrictMode>
         <ApolloProvider client={client}>
        <Provider store={store}>
        <BrowserRouter>
            <App />
            </BrowserRouter>
            </Provider>
            </ApolloProvider>
        </React.StrictMode>,
        document.getElementById("root")
    );

我在完成 redux 的动作文件时遇到问题。 它没有向应用程序的其余部分发送数据。

    import {
     FETCH_PRODUCTS,
     FETCH_PRODUCTS_FAIL,
     FETCH_PRODUCTS_SUCCESS } from "../types";
    import {gql} from "apollo-boost";
    
    const getProductsQuery = gql`
    {
        category{
           products{
               name
               inStock
              gallery
              category
              prices{
                  currency
                  amount
              }
       }
    }
    
    }
    `
    
    const fetchProducts = () => async(dispatch) =>{
        dispatch({
             type: FETCH_PRODUCTS,
         });
    
         try{
    
           //how can I get data from GRAPHQL by using apollo client
    
             dispatch({
                 type:FETCH_PRODUCTS_SUCCESS,
                 payload:data,
             });
            
         }
         catch(error){
             dispatch({
                 type: FETCH_PRODUCTS_FAIL,
                 payload:error.message
             });
         }
    
    }
    // export default graphql(getProductsQuery);
    export {fetchProducts};

Answer 1

当您使用 Apollo 时，您真的不应该将这些数据放入 Redux。您仍然可以将 Redux 用于其他东西，但 apollo 的工作是保存这些数据并使其在您的组件中可用。将其取出并放入 Redux 意味着您将工作加倍而没有额外的好处，更糟糕的是，您很有可能在两层之间引入大量异步。