javascript - 如何将全局状态数据处理到 Redux 中的深层嵌套组件中？

Question

假设您有一个具有此组件结构的聊天应用程序:

<ChatApp>
  <CurrentUserInfo>...</CurrentUserInfo>
  <ChatsPanel>...</ChatsPanel>
  <SelectedChatPanel>
    <MessagesList>
      <MessageBaloon>
        <MessageText></MessageText>
        <MessageUserHead></MessageUserHead>
      </MessageBaloon>
      ...
    </MessagesList>
  <SelectedChatPanel>
</ChatApp>

Redux 状态如下:

{ 
  currentUser: ...,
  chatsList: ...,
  selectedChatIndex: ...,
  messagesList: [ ... ]
}

您将如何使当前用户信息对 <MessageUserHead> 可用？组件(将为每条消息呈现当前用户缩略图)而不必从根组件一直传递到所有中间组件？

以同样的方式，您如何在不暴露整个状态对象的情况下使组件树中的每个表示/dumb组件都可以使用当前语言、主题等信息？

Answer 1

(更新:在选项 4 上花了一些时间，我个人认为这是可行的方法。我发布了一个库，react-redux-controller 围绕这种方法构建。)

我知道有几种方法可以通过中间的分支从根组件向下到叶组件获取数据。

Prop 链

Redux 文档，在使用 react-redux 的上下文中, suggest通过 props 将数据传递到整个分支链。我不赞成这个想法，因为它将所有中间分支组件耦合到今天的应用程序结构。从好的方面来说，您的 React 代码将相当纯净，并且仅在顶层耦合到 Redux 本身。

所有组件中的选择器

或者，您可以使用 connect 使 Redux 存储中的数据可用，而不管您在组件树中的哪个位置。这将您的组件彼此分离，但它会将 所有 耦合到 Redux。我会注意到 Redux 的主要作者是 not necessarily opposed到这种方法。而且它的性能可能更高，因为它可以防止由于它们实际上并不关心的 props 发生变化而重新呈现中间组件。

React children

对于以这种方式做事，我并没有想太多，但是您可以在最高级别将整个应用程序结构描述为嵌套组件，将 props 直接传递给远程后代，并使用children 在分支级别渲染注入(inject)的组件。然而，在极端情况下，这会使您的容器组件变得非常复杂，尤其是对于具有不止一种类型的子组件的中间组件。由于这个原因，不确定这是否真的可行。

react 上下文

正如@mattclemens 最先提到的，您可以使用实验性的 context api解耦你的中间组件。是的，它是“实验性的”。是的，React 团队似乎并不喜欢它。但请记住，这正是 Redux 的 connect 用来从选择器注入(inject) dispatch 和 props 的方法。

我认为它取得了很好的平衡。组件保持解耦，因为分支组件不需要关心后代的依赖关系。如果只在根使用connect来设置context，那么所有的后代只需要耦合到React的context API，而不是Redux。组件可以自由地重新排列，只要某个祖先正在设置所需的 context 属性。如果设置 context 的唯一组件是根组件，那么这很正常。

React 团队将使用 context 与全局变量进行比较，但这感觉有点夸张。对我来说，它更像是依赖注入(inject)。