相关疑难解决方法(0)

我在一个在线食品订购应用程序中使用 Redux 和 React。

当用户从他们的购物篮中移除一件商品时，我需要向服务器发出 XHR 请求以计算购物篮的新总价。当这个 XHR 完成时，我更新 redux 商店并呈现新的价格。我正在使用 Redux thunk 来管理这个异步操作。

有一个问题是用户快速连续地从篮子中取出两个物品。用户删除了第一件商品，然后我触发了 XHR 以获得新价格。然后用户单击一个按钮以删除第二个项目，并触发第二个 XHR。

如果第二个 XHR 在第一个 XHR 之前完成，则 UI 将处于不正确的状态 - 将显示仅移除第一个项目的篮子的价格。

为了解决这个问题，我想在用户单击按钮删除第二个项目时取消第一个（飞行中）XHR。要取消第一个 XHR，我需要跟踪 promise 对象（我使用axios来管理 XHR）。

将飞行中的 XHR 存储在 redux 存储中对我来说是有意义的。像这样在 Redux 中存储 promise 是不好的做法吗？这似乎令人不悦——Redux 应该真的只是存储普通数据。

想象一下按下按钮就可以点赞的帖子。此按钮会修改远程数据库，因此将喜欢的内容关联到特定帖子需要一些时间。

现在，如果用户使用以下代码开始如此快速地按下按钮：

 state = {
    isLiked: false,
 }

 handlePress = () => {
    this.setState(
      {
        isLiked: !this.state.isLiked,
      },
      this.handleLike
    );
  };

  handleLike = async () => {
    const { postId } = this.props;

    try {
      console.log(isLiked ? "Liking" : "Disliking")
      await db.processLike(postId);
    } catch (err) {
      // If an error has occurred, reverse the 'isLiked' state
      this.setState({
        isLiked: !this.state.isLiked,
      });

      // TODO - Alert the error to the user in a toast
      console.log(err);
    }

    console.log("DONE");
  };

由于一切都是异步的，因此可以看到这种情况：

喜欢

不喜欢

完成 …