小编典典

如何在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