基于React/Redux构建基于React和依赖注入的成熟应用程序体系结构

Question

我是React的新手，试图通过它来构建一个良好的应用程序体系结构。 我也用打字稿与所有的特点：接口，异步的await，仿制等，所以，我很疑惑实施某种模式：

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

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

<UserProfile id={123} />

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

无法重用组件实例的另一方面是，我们必须在所有组件结构中携带一些不必要的对象，以便将它们注入深处的底部。没有人告诉你什么组件确实使用它们。并试图想象在大型项目中添加对低级组件的依赖关系。我不能。

2）使用承诺

让我们考虑是应该呈现一个柜台一个简单的组件：<Counter value={123} />。 现在，值从一些API调用的方法getCounter(id: number): Promise<number>;了，所以明显的方式把所有在一起，看起来是这样的：

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

但I'T不可能的，我知道。通常的做法告诉我们通过setState方法并在收到值后重新渲染组件。

现在设想父组件非常复杂并且有许多不同的提供者。所以，父组件可能没有明确的状态类型。这也可能是有条件的，你知道...

你可以建议我实现异步获取计数器组件，但我会拒绝的一个简单的理由：该组件不知道任何关于该值的起源。在其他情况下，该值直接作为数字传递。那么，您是否有更好的想法，在使用承诺时如何保持代码清洁和简单？

请让我知道，如果你遇到一些好文章或有你自己的经验解决这些问题。 PS：感谢您的关注！ :)

Answer 1

本主题是偏见的对象 - 所以下面我会给出不假装是绝对真理的话题我非常个人想法。

1. DI。

这实际上并不是那么普遍的反应模式，因为它是在角度。但是同时具有组件中的上下文和属性，可以使您像纯DI一样对归档进行相同级别的分离。检查context - 它将帮助您摆脱在整个组件树中传递相同的道具。关于这个话题的文章已经不少（one，two） - 请检查一下。你也可能有兴趣阅读这个thread）。

承诺

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