React Native 不从移动的客户端连续调用更新API的最佳实践

roejwanj  于 2023-10-22  发布在  React
关注(0)|答案(1)|浏览(118)

我有点坚持如何将是最好的方式来实现我的应用程序的这个功能:用户具有购物车,并且可以添加或移除他想要投掷步进器(+和-按钮)的多少物品。
购物车也保存在后端,因此每个步进式按键(目前)都会调用后端的更新API。
这意味着如果用户快速按下30次,则API将被调用30次。这将是我的代码示例(我正在为我的移动的应用程序使用React Native):

const cartStore = useObservable(() => {
   cart: [],
   id: undefined,
   addItem(item) {
      cart.push(item);
      this.updateDynamoCart();
   },
   updateDynamoCart(
     if(!this.id) {
         createCart();
     }
     updateCart(this.cart);
   }
});

我觉得提到它在一个商店里,并且我正在使用带有Dynamo的aws-tool(调用APPSyncAPI可能对这个问题很有用
所以基本上:

  • 我在本地存储购物车值
  • 每次更新我的本地购物车时更新数据库上的购物车

我知道采用这种方法我会遇到这些问题:

  • 如果某个调用出错,我的本地购物车可能与数据库不一致
  • 我用无用的API调用轰炸我的客户端(我认为“无用”)

我想了一些其他的方法,但在我看来,它们给用户带来了更大的问题。举例来说:

通过APPSync API响应更新购物车

  • 显示给用户的购物车从用户交互开始更新得太晚了
    订阅更新
  • 即使我还没有完全了解订阅GraphQL查询,我仍然认为它会引入用户交互的延迟

我想从用户交互开始设置一个3秒的超时,并在超时到期后进行更新(不会被另一个交互覆盖)可以解决“数千个呼叫”,但我不确定这是一个最佳实践。
有人能给我指个正确的方向吗?我在谷歌上找不到
PS:我甚至不确定标签是否合适,因为我不知道问题在哪里

svmlkihl

svmlkihl1#

首先,我想感谢你的这个问题,这个问题对其他人很有用,
每当我们开发电子商务应用程序时,这个问题就会出现。如果我们使用API管理购物车。
我有办法减少API调用。

首先我们需要添加到添加到购物车按钮,而不是我们的产品详细信息屏幕中的计数器(当用户单击添加到购物车时,我们将调用API,并且1个项目已添加到购物车。)
第二在购物车屏幕中,我们将显示数量而不是增量计数器,如果用户想要更新数量,则他将从数量中选择新的数量(0(数量),1,2,3,4,5和其他),如果用户选择其他,则我们将显示手动输入以添加数量

或者,如果我们不喜欢用户选择数量,那么我们将在用户单击加号按钮(+)时显示弹出窗口,应该显示一个包含产品和(-)计数(+)的弹出窗口,用户选择5个数量产品并关闭按钮,那么我们将调用API,这也将减少API调用

相关问题