使用 Redux 更改根组件的状态/props？

IT技术 reactjs redux state
2022-07-05 01:29:12

我的根组件呈现如下内容：

<Provider store={store}>
  <IntlProvider locale="en" messages={this.state.messages}>
    <Router>
      <App>
        // routes
      </App>
    </Router>
  </IntlProvider>
</Provider>

我this.state.messages从后端动态地获取（异步，Redux 操作 + 减速器）作为对象。我将它存储在 Redux 商店中。我如何将 Redux 存储传递messages给this.state.messages（props也可以）。

情节转折：我不能connect在这个组件上使用 react-redux，因为它是根组件并且它不在里面<Provider>（它引入了它），所以，这样做：

const mapStateToProps = state => {
  return {
    messages: state.messages
  }
}

export default connect(mapStateToProps)(RootComponent);

结束于：

Uncaught Error: Could not find "store" in either the context or props of "Connect(RootComponent)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(RootComponent)".

有没有办法以不同的、理智的方式访问 Redux 商店？我在考虑 store.getState() 但它不接受任何参数，并且当我只想获得其中一个时，映射所有状态项似乎有点过头了。或者也许我做错了什么，毕竟connect应该在这里工作？

1个回答

您可以创建一个连接的react组件，该组件将包装 IntlProvider，并将消息传递给它。

示例代码（未测试）：

const ConnectedIntlProvider = ({ children, ...props }) => ( // the props contain the messages and the locale
  <IntlProvider locale="en" { ...props }>
  { children }
  </IntlProvider>
);

const mapStateToProps = state => ({
  messages: state.messages
});

export default connect(mapStateToProps)(ConnectedIntlProvider);

用途：

<Provider store={store}>
  <ConnectedIntlProvider locale="en">
    <Router>
      <App>
        // routes
      </App>
    </Router>
  </ConnectedIntlProvider>
</Provider>
其它你可能感兴趣的问题
上一篇Gatsby (gatsby-source-strapi) - 您的数据问题中存在冲突的字段类型 下一篇如何访问组件的 ref？