Как получить локальное состояние другого компонента, используя Redux

Question

Используя «Реак + редукс», я создаю приложение, в котором вы отвечаете на вопросы, 5 вопросов за шаг и около 20 шагов. При запуске нового шага я сохраняю прогресс в localStorage. Моя структура приложения выглядит следующим образом:

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div id="ocean-model">
            <Topbar />
            <main id="main">
              <Route exact path="/" component={Landing} />
              <Switch>
                <PrivateRoute exact path="/survey" component={Survey} />
              </Switch>
              <Switch>
                <AdminRoute exact path="/edit-questions" component={EditQuestions} />
                <AdminRoute exact path="/add-question" component={AddQuestion} />
              </Switch>
            </main>
          </div>
        </Router>
      </Provider>      
    );
  }
}

В компоненте «Съемка» я использую контролируемые входные данные для сохранения текущих ответов в локальное состояние, а при отправке всех 5 ответов я использую избыточное действие для сохранения данных ответов в localStorage и избыточном хранилище.

В компоненте Topbar у меня есть кнопка, на которой я хотел бы взять текущий прогресс из магазина приставок, но также получить текущие ответы на вопросы (например, 2 из 5), которые доступны только в локальном компоненте Survey. состояние.

Нужно ли изменять структуру приложения, чтобы Topbar и Survey могли совместно использовать состояние, или, возможно, в Survey мне нужно каким-то образом прослушивать событие нажатия кнопки из Topbar?

Answer 1

Есть ли какая-то причина, по которой вы не можете сохранить данный ответ в localStorage и онлайн-хранилище, когда ввод теряет фокус? Возможно, нужно разрешить запускать действие, если нажата кнопка компонента «Верхняя панель», пока фокус находится на последнем вводе с ответом.

В качестве альтернативы можно использовать React Context в качестве контейнера состояния для каждого набора из 5 вопросов и использовать его как на форме, так и на кнопке Topbar с поставщиком, расположенным в дереве компонентов над обоими.