API消费组件是反模式的吗？

Question

我有一个简单的API，我的React可以用来与我的后端通信。API有不同的端点和3个不同的版本，其工作方式如下：

• 我们有匿名用户可以使用的公共URL (public.api.mysite.com)
• 我们有一个私有的URL，只有在用户中签名才能与他们的凭据(private.api.mysite.com)一起使用。
• 私有API上的某些端点可能只是指向相同的代码，这将忽略凭据。
• 还有一个用于测试的API URL，大部分时间都运行在本地主机上。

我正在考虑创建一个REACT组件，用于处理可能如下所示的所有API通信：

<APIConsumer 
   url="posts/7daa4649-14bd-4521-83a3-87609da277d9" method="post" 
   payload={data} 
   handleError={(e)=>setLabel("Error occured because "+e.message)}
   handleLoading={()=>setLabel("Loading please wait")}
   handleSuccess={
          (data)=>{
                 setLabel(null);
                 setPosts((oldPosts)=>[...oldPosts,data])
          }
    }
/>

这样做的好处是，如果用户登录或在开发期间登录，我可以在一个地方更改后端URL。我还可以创建一个具有用户凭据的用户上下文，它可以在APIConsumer中使用。

但它也像反模式一样，因为它在较低的组件(APIConsumer而不是其父组件)处理状态更改。

还有一个事实是，我从未在野外看到过这样的图案。我通常看到大量代码处理与api的交互，在顶层组件中使用fetch或axios (包括所有post、get、修补程序等)。))。

那么，这种泛化api通信的方法是一个好主意，还是一个反模式？

Answer 1

这个功能不属于组件.

从您所展示的道具中猜测，组件将不会呈现任何内容。它只是作为一个容器内的逻辑。

不要将应用程序逻辑与React生命周期

联系起来

当您需要调用API以响应按钮单击时，会发生什么情况？您是否设置了呈现组件的“按钮单击”状态，然后隐藏完成后的组件？更糟糕的是，如果您必须在其他逻辑的中间调用您的API，怎么办？

重新呈现引起另一个问题。取决于您实现该组件的方式，每次父级状态更改时，它都会重复API调用！

独立逻辑和表示代码

一个简单的选择是将API访问代码移到类中。构造函数将接受并存储用户凭据和任何其他一致信息，如“基本”url或域。它可以使用url、方法、有效负载和回调调用一个函数。

您可以将该类的实例存储在上下文中(就像您对凭据所做的那样)，并在需要使用它时提取它。获取实例后，可以将其作为简单对象传递给其他函数、对象或组件，而不依赖于React或其呈现周期。