在React组件和服务之间进行通信的最佳实践是什么? [英] What is best practice to communicate between React components and services?

问题描述

与其使用flux/redux体系结构，不如如何使用响应组件与服务进行通信?

例如: 有一个几乎没有代表性(反应性)组件的容器:

1. ChatBox-用于读取/写入消息
2. 带有密码更改器的AvatarBox-可更改用户密码
3. 新闻流-列出新闻并对其应用过滤器

将它们视为资源表示形式，我希望它们中的每一个都可以自己访问Microservice API(获取或更新数据).这样对吗? 它将提供干净的责任管理模型，但使用http请求加载每个组件的内容会带来性能怀疑

此问题还涉及:如何对多个微服务执行有效的通信(micro)服务?

解决方案

当您选择不使用Flux/Redux 时，您将执行以下操作:

创建一个外部组件，该组件应包装所有其他组件.此组件也称为高阶组件或控制器视图.该组件应使用HTTP库与您的微服务通信(我个人很喜欢 Axios ).我建议您创建一个包装Axios的客户端API对象.您的高阶组件可以引用此客户端API，因此与HTTP库无关.我还将在dev模式下将此客户端API的引用放在window对象上，以便您可以在Chrome console中执行window.clientApi.fetchSomething()并简化调试.

使所有其他组件(ChatBox，AvatarBox和NewsStream)得到控制.如果您不熟悉此概念，则表示他们通过 props 获得了他们所需的一切，并且避免保持状态.这些组件不应调用微服务本身.这是高阶组件的责任.为了进行交互，这些组件应接收事件处理程序作为道具的功能.

这是正确的吗?它将提供干净的责任管理模型，但使用http请求加载每个组件的内容会带来性能怀疑

您可以通过不允许每个组件直接联系微服务来避免性能问题.如果您的高阶组件编译了所有必需的信息，并进行了尽可能少的HTTP调用，那么使用这种方法应该会很好.

通常建议使用Flux/Redux，但是如果您选择退出，这就是解决方法.

Instead of using flux/redux architecture, how react components should communicate with services?

For example: There is a container having few representational (react) components:

1. ChatBox - enables to read/write messages
2. AvatarBox with password changer - which enables to change user's password
3. News stream - lists news and apply filter to them

Thinking of them as resources representation, I want each of them to access Microservice API by itself (getting or updating data). Is this correct? It will provide clean responsibility managing models, but it gives performance doubts using http requests to load each component's content

This question also reffers to: How to execute efficient communication for multiple (micro)services?

解决方案

When you opt for not using Flux/Redux, here is what you do:

Create an outer component that should wrap all the other components. This component is also known as a higher order component or a controller view. This component should use an HTTP library to communicate with your microservices (I personally like Axios). I would recommend that you create a client API object that wraps Axios. Your higher order component can reference this client API so it is agnostic of the HTTP library and whatnots. I would also put a reference of this client API on the window object in dev mode so you can do window.clientApi.fetchSomething() in the Chrome console and make debugging easier.

Make all the other components (ChatBox, AvatarBox and NewsStream) controlled. If you are not familiar with this concept, it means they receive everything they need through props and they avoid keeping state. These components should not call the microservices themselves. This is responsability of the higher order component. In order to be interactive, these components should receive event handlers as functions as props.

Is this correct? It will provide clean responsibility managing models, but it gives performance doubts using http requests to load each component's content

You can avoid performance issues by not allowing each component to directly contact the microservices. If your higher order component compiles all the information needed and make as little as possible HTTP calls, you should be perfectly fine with this approach.

It's generally recommended to use Flux/Redux, but if you opt out, this is how to go about it.

这篇关于在React组件和服务之间进行通信的最佳实践是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！