基于带有承诺和依赖注入的React / Redux构建成熟的应用架构

Question

我是React的新手，正在尝试获得如何用它构建良好的应用程序架构的方法。 我还使用具有所有功能的打字稿：接口，异步等待，泛型等。因此，我对实现某些模式感到困惑：

1） 依赖注入和可重用组件实例

我无法通过的第一件事是DI。 假设我们有一个组件类UserProfile ，它需要一些依赖项，例如UserProvider 。 如果组件实例（注入dep）可以重用，那将是完美的，但是恐怕这只是我的梦想，而不是反应灵敏的人。 :)因此，我应该以这种方式放置此组件：

<UserProfile id={123} />

好的，在这里注入依赖项的正确方法是什么？ 作为这样的属性<UserProfile id={123} dependency={userProvider: userProviderInstance} /> ？ 您不认为将组件输入数据，选项/参数和依赖项放在一起是很奇怪的吗？ 如果能将它们明确分开并将通用限制放在组件类上，我会很高兴。 最佳做法是什么？

不能重用组件实例的另一方面是，我们必须通过所有组件结构携带一些不必要的对象，只是要将它们注入到底部的某个深处。 没有人告诉您哪个组件真正使用它们。 并试想一下，在大型项目中向低级组件添加依赖项会带来什么。 我就是做不到

2） 使用承诺

让我们考虑一个应该呈现计数器的简单组件： <Counter value={123} /> 。 现在，通过调用方法getCounter(id: number): Promise<number>;从某个API获得值getCounter(id: number): Promise<number>; ，因此将所有内容组合在一起的明显方法可能如下所示：

<Counter value={await provider.getCounter(id)} />

但是我知道我不是不可能的。 通常的做法是告诉我们通过setState方法进行设置，并在接收到值后重新呈现组件。

现在，假设父组件非常复杂，并且具有许多不同的提供程序。 因此，父组件可能没有确定的状态类型。 这也可能是有条件的，你知道...

您可能会建议我在Counter组件中实现异步获取，但是出于一个简单的原因，我将拒绝：该组件对值的来源一无所知。 在其他情况下，该值直接作为数字传递。 那么，您有更好的主意如何在使用Promise的同时保持代码的简洁和简洁吗？

请让我知道您是否遇到过一些好文章或在解决这些问题上有自己的经验。

PS：感谢您的关注！ :)

Answer 1

这个话题是一个有偏见的话题-因此，在下面，我将对这个假装不是绝对真理的话题给出我个人的看法。

1. DI 。

实际上，这在反应中并不像在角度上那样常见。 但是在组件中同时具有上下文和属性，可以使您归档与纯DI相同级别的分离。 检查上下文 -这将帮助您摆脱在整个组件树中传递相同道具的麻烦。 已经有很多关于该主题的文章（ 一篇 ， 两篇 ）-仔细阅读。 另外，您可能对阅读此线程感兴趣）。

2. 承诺

我真的没有在这里看到任何问题。 React有一个简单的概念-基本上，您具有状态，基于此状态，您的应用可以呈现自己。 尽管呈现不是异步操作，但是状态的准备 / 更新可以轻松地异步完成，并且在将结果分配给状态的相应部分之后，必要的子组件将自动更新。 如果您的组件不知道如何获取价值-不应首先尝试做到这一点-应当将价值作为道具传递下来。