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

在Survey组件中，我使用受控输入将当前答案保存到本地状态，并在提交所有5个答案时使用redux动作将给定答案保存到localStorage和redux存储中。

在Topbar组件中，我有一个按钮，我希望在onClick上从redux商店获取当前进度，但也要获取当前已回答的问题（例如5之2），这仅在Survey组件的本地可用状态。

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

Answer 1

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

另一种选择是将React Context用作每组5个问题的状态容器，并使用表单和Topbar按钮中的问题容器，并在两个树上方的组件树中使用Provider。

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

1 个答案: