Изменение состояния / реквизита корневого компонента с помощью Redux?

У меня есть корневой компонент, который отображает что-то вроде этого:

<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).

Поворот сюжета: я НЕ МОГУ ИСПОЛЬЗОВАТЬ react-redux connect с этим компонентом, потому что это корневой компонент, а не внутри <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 здесь должно работать?


reactjs redux state
person Wordpressor    schedule 26.11.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете создать подключенный компонент реакции, который будет обертывать 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>
person Ori Drori    schedule 26.11.2017