By medium-term state, I mean state that will stick around while the user navigates your app. This could be data loaded from an API, or any changes that you want to be persisted up until a page refresh. After submitting a form, I would store the state in the Redux store. As an example, if a user submits a form updating their profile information, it would make sense to store this in Redux. It allows you to share data that can be considered global for a tree of React components, like the current authenticated user, theme, or preferred language.
This function will turn all reducers into a single reducer that can be passed to the createStore API. For now, inside the store directory, let’s create a file called reducers.js and implement why redux the combineReducers function there. To make this clearer, let’s create a folder called store in the src directory. This directory will contain all the actions and reducers we’ll be writing.
More articles by this author
Reducers hold the logic that will be performed based on the action (the information) being sent to the store. Let’s say you wanted to populate the user’s personal information (first name and last name) in a contact form inside your app to avoid the users having to type their information again. Your app’s component hierarchy starts to grow beyond the point of a simple structure. You need to pass the state between components as props (also known as props drilling). This is just not sustainable in the long run, and maintaining your app will become a difficult process. Important to mention, React-Redux partially uses Context-API.
When possible, choose the standard useEffect to prevent obstructing visual updates. Keep in mind that useMemo’s function executes when rendering is taking place. Avoid taking any actions there that you wouldn’t take while rendering. In useEffect, not useMemo, side effects, for instance, belong. If an array is not provided, every render will produce a new value.
Library Hooks
This means any component connected to the store can access the state information and either display it or change it. Context is just a mechanism for sharing values to a nested subtree of components, and not an approach to state management itself. What this means is that you have to write any state management logic you need to define the value that is transferred to the context provider. Usually it happens through the React component state, but the point is that Context itself won’t manage the state for you.
If you want your Redux state to be deterministic, use pure functions. If you want your ephemeral component state to be deterministic, use pure functions. Redux has always been more architecture and unenforced convention than library. In fact, the essential implementation of Redux can be reproduced in a couple dozen lines of code. In the future, React’s suspense API may help with saving and loading state.