使用 Promise 和依赖注入构建基于 React/Redux 的成熟应用架构

Question

我是 React 的新手，并试图了解如何使用它构建一个好的应用架构。 我还使用具有所有这些功能的打字稿：接口、异步等待、泛型等。所以，我对实现一些模式感到困惑：

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

我无法通过的第一件事是 DI。假设我们有一个组件类UserProfile，它需要一些依赖项，例如UserProvider。如果组件实例（注入了deps）可以重复使用，那将是完美的，但我担心这只是我的梦想，而不是反应人员。 :) 所以，我应该这样放置这个组件：

<UserProfile id={123} />

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

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

2) 使用承诺

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

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

但我知道，我不是不可能的。通俗的做法是让我们通过setState方法来实现，并在收到值后重新渲染组件。

现在想象一下父组件非常复杂并且有许多不同的提供者。因此，父组件可能没有明确的状态类型。它也可能是有条件的，你知道...

您可以建议我在 Counter 组件中实现异步获取，但我会拒绝，原因很简单：该组件对值的来源一无所知。在其他情况下，该值直接作为数字传递。那么，在使用 Promise 时，您是否有更好的想法来保持代码简洁明了？

如果您遇到了一些好文章或有自己解决这些问题的经验，请告诉我。

PS：感谢关注！ :)

Answer 1

这个话题是一个偏见的话题 - 所以下面我将就这个话题发表我的非常个人的想法，而不是假装是绝对真理。

1. DI。

这在 React 中确实不像在 Angular 中那样常见。但是在组件中同时拥有上下文和属性允许您归档与纯 DI 相同级别的分离。检查context - 它将帮助您摆脱在整个组件树中传递相同的道具。已经有很多关于这个主题的文章（one，two） - 看看它们。你也可能有兴趣阅读这个thread)。

1. 承诺

我在这里真的没有看到任何问题。 React 有一个简单的概念——基本上你有状态并且基于这个状态你的应用程序可以呈现自己。而rendering 不是异步操作——状态的preparation/update 可以很容易地异步完成，并且在结果是assigned 到状态的相应部分之后——必要的子组件将自动更新。如果您的组件不知道如何获取值 - 它不应该首先尝试这样做 - 值应该作为道具传递。