How do you clear Redux state?

Question

As a Redux novice, given (the idea) a slightly larger application, I imagine a root reducer similar to:

const rootReducer = combineReducers({ accounting, crm, sales }) 

The application state in this case will contain accounting, crm and sales, even if the user uses only one part of the application. This can be beneficial, for example, as a cache when switching between accounts and CRM, but you probably do not want to save all the data of all previously opened views, that is, the full possible state tree without any clipping, inside the application forever or even initialize the entire tree to its initial state at boot.

Are there idioms, templates, or libraries that solve this, or am I missing something?

As a partial solution that decides to save all the data, I imagine something like resetting parts of the state to its original state when navigating from certain parts of the application, taking into account some declarative rules, such as:

• set accounting = {} (indirectly through an action such as ACCOUNTING_LEAVING ) when <Accounting/> gets componentWillUnmount
• remove / set crm.mail = {} when <MailEditor/> receives componentWillUnmount

I have not seen examples that purify the state in any way. Many examples of "list + detail view" store a state like { list: [...], detail: {...} } , but when you switch to the detailed view, the list is not cleared, numbered or deleted. It is nice when I can return to viewing the list in a couple of minutes, but not when using the application from 9 to 5 without data release.

Answer 1

A few related thoughts:

• If you do not expect tens or hundreds of megabytes of data to be stored in your storage, you are likely to worry about it too soon. Write your application, benchmark, and then optimize.
• Submitting actions to clean parts of the store is fully valid and reasonable.
• My Redux Directory Ecosystem Directory may have some libraries listed that would be helpful. In particular, the Component Status and Reducer pages point to some libraries that do things such as dynamically adding and removing gears from your store, and reset status.
• You may also be interested in my collection of high quality React and Redux tutorials .

In general, how you arrange your state when you update it, and what you update is up to you. Redux simply provides the template and rules for the upgrade process.