9
随着我进一步实现redux + react到一个相当复杂的应用程序中，这个应用程序依赖于许多API请求来加载单个页面，所以我无法决定是否最好在页面处理所有异步的东西，并将道具传递给愚蠢的组件拥有多个容器组件，这些组件只关心他们需要的数据，以及获取他们需要的数据。我来回走了这两种模式之间，发现他们各有优点/缺点：React Redux：更多容器v.s.更少的容器
如果我把在顶部有一个单一的容器组件：
- 亲：所有
isFetching道具fetchSomeDependency()行动可以在一个地方处理。 - con：真正令人讨厌的缺点是我发现自己必须通过多个组件转发道具和回调，并且树中间的某些组件最终与此绑定。
这里是问题的一个视觉的例子，显示关系所需的道具明智：
<MyContainer
data={this.props.data}
isFetchingData={this.props.isFetchingData}
fetchData={this.props.fetchData}
>
{!isFetchingData &&
<MyModal
someData={props.data}
fetchData={props.fetchData}
>
<MyModalContent
someData={props.data}
fetchData={props.fetchData}
>
<SomethingThatDependsOnData someData={props.someData} />
<SomeButtonThatFetchesData onClick={props.fetchData} />
</MyModalContent>
</MyModal>
}
</MyContainer>
正如你所看到的，<MyModal />和<MyModalContent />现在需要与拥有无关道具关注它看作是一种模式应该能够被重用，并且只关心模式的文体特征。
起初以上看起来不错，但一旦我有100多个组件，它们都感觉非常混乱，我发现这些顶级容器组件的复杂性对我来说太高了，因为它们中的大多数（在我正在工作的应用程序中）取决于来自3个API请求的响应。
于是我决定尝试多个容器：
- 亲：完全消除需要转发的道具。在某些情况下做它仍然有意义，但它更加灵活。
- 亲：方式更容易重构。我很惊讶我如何能够在没有任何突破的情况下大幅移动和重构组件，而在另一种模式中，事情却打破了很多。
- 亲：每个容器组件的复杂性要小得多。我
mapStateToProps和mapDispatchToProps是更具体的是在 - CON组件的目的：依赖于异步东西的任何组件将始终需要处理本身
isFetching状态。这增加了在单个容器组件中处理的模式中不必要的复杂性。
所以今天的主要困境是，如果我使用一个容器，我的根容器和叶片组件之间的部件得到这个非必要的复杂性。如果我使用多个容器，我在叶子组件中得到了更多的复杂性，并且最终得到的按钮需要担心isFetching，即使按钮不应该担心这一点。
我想知道是否有人找到了避免这两个缺点的方法，如果有的话，您遵循什么样的“经验法则”来避免这种情况？
谢谢！
请发表可读的解决方案。 – Sachith