javascript - 如何使用 Redux 获取另一个组件的本地状态

Question

使用react + redux，我正在制作一个应用程序，您可以在其中回答问题，每步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 个答案时使用 redux 操作将给定答案保存到 localStorage 和 redux 存储。

在 Topbar 组件中，我有一个按钮，单击该按钮我想从 redux 存储中获取当前进度，同时也获取当前回答的问题(例如 5 中的 2 个问题)，这些问题仅在 Survey 组件的本地可用状态。

我是否需要修改应用程序结构，以便 Topbar 和 Survey 可以共享状态，或者在 Survey 中我需要以某种方式监听 Topbar 按钮的 onclick 事件？

Answer 1

当输入失去焦点时，是否有任何原因无法将给定答案保存到 localStorage 和 redux 存储？如果在焦点仍位于带有答案的最后一个输入上时单击顶部栏组件按钮，可能需要允许触发操作。

另一种方法是使用 React Context 作为每组 5 个问题的状态容器，并从表单和顶部栏按钮中使用它，并在两者上方的组件树中提供一个提供程序。