Question

我正在实现一项功能，用户可以“喜欢”（然后不喜欢）某项，以将其添加到愿望清单或从愿望清单中删除。我乐观地将项目添加到本地redux状态的点赞数组，然后将添加或删除项发送到服务器。服务器返回时，我要么报告成功（什么都不做），要么报告失败并恢复旧的点赞。

我只到了减速器，看起来像这样：

export default function dealsReducer(
  state: DealState = initialState,
  action: DealAction
): DealState {
  let wishlist; // local wishlist variable for manipulation
  switch (action.type) {    
    case "ADD_TO_WISHLIST_START":
      return { ...state, wishlist: state.wishlist.concat(action.id) };
    case "REMOVE_FROM_WISHLIST_START":
      wishlist = [...state.wishlist];
      wishlist.splice(action.removal.index, 1);
      return { ...state, wishlist };
    case "ADD_TO_WISHLIST_FAILURE":
      wishlist = [...state.wishlist];
      wishlist.splice(wishlist.indexOf(action.id), 1);
      return { ...state, wishlistFailureId: action.id, wishlist };
    case "REMOVE_FROM_WISHLIST_FAILURE":
      const { id, index } = action.removal;
      wishlist = [...state.wishlist];
      wishlist.splice(index, 0, id);
      return { ...state, wishlistFailureId: -id, wishlist };
    case "WISHLIST_SUCCESS":
    default:
      return state;
  }
}

这对我来说很好。但是，我不确定如何处理这样的情况，例如，用户变得疯狂，并且在多个项目上击中“喜欢”或“不喜欢”的速度快于服务器返回的速度，而有些

我想象在理想情况下，服务器响应将包含当前的愿望清单，无论成功与否。但是我正在使用没有API的插件在WordPress网站上构建此应用，但是该插件具有用于添加和删除喜欢的网址，从而“返回”愿望清单HTML页面，并且通过抓取该页面来获取当前的愿望清单。我会想象在一个错误的情况下，我不会获得带有当前愿望清单的页面。

因此，我能想到的任何情况都涉及到引用先前的愿望清单（例如代码中跟踪被删除项目的先前索引的愿望清单）不会知道任何中间成功。

对此有一个好的解决方案吗？

如何处理Redux中重叠的服务器故障

0 个答案: