Saya memiliki komponen root saya yang membuat sesuatu seperti ini:

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

Saya mendapatkan this.state.messages secara dinamis (async, Redux action + reducer) dari back-end sebagai objek. Saya menyimpannya di toko Redux. Bagaimana cara meneruskan toko Redux messages ke this.state.messages (props juga bisa dilakukan).

Plot twist: SAYA TIDAK BISA MENGGUNAKAN react-redux connect dengan komponen ini, karena ini adalah komponen root dan tidak ada di dalam <Provider> (itu memperkenalkannya), jadi, lakukan ini:

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

export default connect(mapStateToProps)(RootComponent);

Berakhir di:

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

Apakah ada cara mengakses toko Redux dengan cara yang berbeda dan waras? Saya sedang berpikir tentang store.getState() tetapi tidak menerima argumen dan pemetaan atas semua item status sepertinya berlebihan ketika saya ingin mendapatkan hanya salah satunya. Atau mungkin saya melakukan sesuatu yang salah dan bagaimanapun connect seharusnya bekerja di sini?

0
Wordpressor 26 November 2017, 14:39

1 menjawab

Jawaban Terbaik

Anda dapat membuat komponen reaksi terhubung yang akan membungkus IntlProvider, dan meneruskan pesan ke dalamnya.

Kode sampel (belum diuji):

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

Penggunaan:

<Provider store={store}>
  <ConnectedIntlProvider locale="en">
    <Router>
      <App>
        // routes
      </App>
    </Router>
  </ConnectedIntlProvider>
</Provider>
4
Ori Drori 26 November 2017, 11:54