在 React 中处理多个 GraphQL 订阅事件答案

【问题标题】：Handling multiple GraphQL subscription events in React在 React 中处理多个 GraphQL 订阅事件
【发布时间】：2020-11-20 09:42:18
【问题描述】：

这让我发疯了，我似乎找不到其他人有同样的问题，这可能意味着我错过了一些基本的东西。

我正在使用 AWS Amplify 并有一个 GraphQL 端点，我在该端点上订阅 React 项目中的一些事件（更新、创建、删除）。我有一个绑定到我的列表对象的表来保存我的数据。

当出现多个事件时，我的状态会因为它是异步的而变得一团糟，我的表最终会丢失一整块数据。我已经尝试使用 useReducer 来查看是否会有所作为，但事实并非如此。我觉得我需要一种方法来对订阅事件进行排队，然后使用它们，这让我想知道这是否不是标准做法，或者我错过了一些基本的东西。

这是我的减速器。

const reducer = (state, action) => {
   switch (action.type) {
      case "ADD":
         return { ...state, productList: action.payload };
      case "UPDATE":
         //update code
      case "DELETE":
         //delete code
      default:
         return state;
   }
};

我在组件中的初始加载和设置

   const [state, despatch] = useReducer(reducer, { productList: [] });

   useEffect(() => {
      fetchData()
         .then((result) => {
            despatch({ type: "ADD", payload: result });
         })
         .catch((err) => console.log(err));

      setupSubscriptions();
      return () => unsubscribe();
   }, []);

我的订阅

   function setupSubscriptions() {
      subscriptionOnCreateProduct = API.graphql(graphqlOperation(onCreateProduct)).subscribe({
         next: (e) => {
            const product = e.value.data.onCreateProduct;
            despatch({ type: "ADD", payload: product });
         },
      });
...

最后是我的渲染

return (
...
{state.productList.map((product) => (
  // Display my data
))}

【问题讨论】：

标签： reactjs amazon-web-services graphql aws-amplify

【解决方案1】：

无奈之下，我匆忙发布了这篇文章。

我需要为初始加载和订阅事件添加新项目时设置不同的操作类型。

我的减速器现在看起来像这样......

const reducer = (state, action) => {
   switch (action.type) {
      case "INIT_LOAD":
         return { ...state, productList: action.products };
      case "ADD":
         return { ...state, productList: [...state.productList, action.product] };
      case "UPDATE":

      ...

      default:
         return state;
   }
};

【讨论】：