Handling Tab State with Redux
Explore how to handle tab state in React applications using Redux by moving state out of components, connecting plain components with Redux, and organizing your files with feature folders for better maintainability and scalability.
We'll cover the following...
While working on the new tab panel contents, a problem becomes noticeable: because the “current tab” value is stored as state in the <TabBarContainer> component, reloading the component tree resets the selected tab when the component instance gets wiped out. This is where Redux can help us, by moving our state outside the component tree. Fortunately, because we kept the tab state in the <TabBarContainer> component, we can replace the local component state version with one that pulls the value from Redux instead. The feature folder will contain the standard action constants, action creators, and reducers, as well as the selector functions to encapsulate looking up this piece of state. For simplicity, we’ll just look at the reducer and the new version of <TabBarContainer>:
...