如何在Redux中将全局状态数据处理为深层嵌套组件？

Question

所以说你有这个组件结构的聊天应用程序:

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

和Redux状态一样:

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

如何将当前用户信息提供给<MessageUserHead>组件(将为每条消息呈现当前用户缩略图),而不必通过所有中间组件从根组件一直传递它？

同样,如何在不借助于暴露整个状态对象的情况下,如何为组件树中的每个表示/哑组件提供当前语言,主题等信息？

Answer 1

(更新:花了一些时间在选项4上,我个人认为这是要走的路.我发布了一个库,基于这种方法构建的react-redux-controller.)

我知道有几种方法可以从根组件,到叶子组件,中间的分支中获取数据.

道具链

的终极版文档,在使用的上下文中发生反应,终极版,建议使数据向下分支经由整个链props.我不赞成这个想法,因为它将所有中间分支组件耦合到今天的应用程序结构中.从好的方面来说,你的React代码会相当纯粹,并且只能在顶层与Redux本身相连.

所有组件中的选择器

或者,您可以使用connect从Redux存储中提供数据,而不管您在组件树中的位置.这会将您的组件彼此分离,但它会将所有内容耦合到Redux.我会注意到Redux的主要作者并不一定反对这种方法.它可能性能更高,因为它可以防止由于props实际上并不关心的变化而重新呈现中间组件.

应对 children

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

反应背景

正如@mattclemens首次提到的,您可以使用实验上下文api来分离您的中间组件.是的,它是"实验性的".是的,React团队似乎并不喜欢它.但请记住,这正是Redux connect用于dispatch从选择器注入和道具的用途.

我认为它取得了很好的平衡.组件保持分离,因为分支组件不需要关心后代的依赖关系.如果您只connect在根目录下使用来设置上下文,那么所有后代只需要耦合到React的上下文API,而不是Redux.只要某些祖先设置了所需的context属性,就可以自由地重新排列组件.如果设置的唯一组件context是根组件,则这很简单.

React团队将使用context与全局变量进行比较,但这感觉有些夸张.这似乎更像是对我的依赖注入.

Answer 2

对于所有“哑”组件的全局信息，您可以使用React contexts。

一个人为的例子

// redux aware component
var ChatApp = React.createClass({
  childContextTypes: {
    language: React.PropTypes.string
  },
  getChildContext: function() {
    // or pull from your state tree
    return {language: "en"};
  },
  ...
}

// dumb components
var ExDumb = React.createClass({
  contextTypes: {
    language: React.PropTypes.string
  },

  render: function() {
    var lang = this.context.language;
    return ( <div /> );
   }
 });

为了回应评论，redux在他们的react-redux 库中使用了这种上下文方法。

更抽象的是，对于在 React 之外使用，您可以在状态树上使用某种 pluck 或选择器函数，并仅返回哑组件所需的全局状态的子集。