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

Question

Using react + redux, I am making an app where you answer questions, 5 questions per step and about 20 steps. When starting a new step, I save the progress to localStorage. My app structure is like this:

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

In Survey component I use controlled inputs to save current answers to local state and on submitting all 5 answers I use redux action to save given answers to localStorage and redux store.

In Topbar component I have a button, which onClick I would like to take the current progress from redux store, but also get the currently answered questions(for example 2 out of 5), which are only available in the Survey component's local state.

Do I need to modify the App structure so that Topbar and Survey can share state or maybe in Survey I need to somehow listen to an onclick event of a button from Topbar?

Answer 1

Is there any reason you can't save given answer to localStorage and redux store when the input loses focus? Might need to allow for the action to fire if the Topbar component button is clicked while the focus is still on the last input with an answer.

The alternative would be to use React Context as your state container for each set of 5 questions and use that from both the form and the Topbar button with a Provider located in the component tree above both.