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

小编典典

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

reactjs

假设您使用此组件结构进行聊天：

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

和一个Redux状态如：

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

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

以同样的方式，您将如何使诸如当前语言，主题等信息可用于组件树中的每个表示/哑组件，而又无需暴露整个状态对象？

阅读 339

2020-07-22

共1个答案

小编典典

要获取所有“哑巴”组件的全局信息，可以使用react上下文。

人为的例子

// 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或选择器函数，并且仅返回哑组件所需的全局状态的子集。

2020-07-22