Mengubah status/properti komponen root dengan Redux?

Saya memiliki komponen root yang menghasilkan 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, tindakan Redux + peredam) dari back-end sebagai objek. Saya menyimpannya di toko Redux. Bagaimana cara meneruskan toko Redux messages ke this.state.messages (props juga bisa).

Plot twist: SAYA TIDAK BISA MENGGUNAKAN react-redux connect dengan komponen ini, karena ini adalah komponen root dan tidak ada dalam <Provider> (ini 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 masuk akal? Saya sedang memikirkan tentang store.getState() tetapi tidak menerima argumen dan memetakan semua item status sepertinya berlebihan ketika saya ingin mendapatkan salah satunya saja. Atau mungkin saya melakukan sesuatu yang salah dan connect harusnya berfungsi di sini?


reactjs redux state
person Wordpressor    schedule 26.11.2017    source sumber

Jawaban (1)


arrow_upward
4
arrow_downward

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

Contoh kode (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>
person Ori Drori    schedule 26.11.2017