Можно ли получить доступ к состоянию избыточного хранилища в той же функции рендеринга, что и <Provider />

Question

Итак, что я имею в виду здесь:

const App = () => {
  return (
    <Provider store={store}>
      <h1>{store.state.title}</h1> // For example
    </Provider>
  );
}

Итак, в приведенном выше примере я пытаюсь получить доступ к title реквизиту в состоянии.

Answer 1

Это проблема XY. Чтобы обновить <h1> новым значением, <Provider> необходимо будет повторно отрендерить. Вместо этого <h1>{store.state.title}</h1> следует переместить в отдельный подключенный компонент:

const Title = connect(...)(({ title }) => <h1>{title}</h1>;

И используется как таковой:

<Provider store={store}>
  <Title/>
</Provider>

Answer 2

Да, вы можете использовать store.getState()

Так в вашем случае будет:

const App = () => {
  const currentStore = store.getState()
  return (
    <Provider store={store}>
      <h1>{currentStore.title}</h1> // For example
    </Provider>
  );
}