In some Redux applications, local state was also stored in the Redux state tree. In others, React class component state was used to store local state. In either case, the way to migrate an existing Redux application is as follows:
- Replace simple local state, such as input field values, with State Hooks
- Replace complex local state with Reducer Hooks
- Keep global state (state that is used across multiple components) in the Redux store
We have already learned how to migrate React class components in the previous chapter. In the previous section, we learned how to migrate from Redux connectors to using Selector and Dispatch Hooks. We are now going to show an example of migrating Redux local state to a Hook-based approach.
Let us assume that our existing todo application stores the input field state in Redux, as follows:
{
"todos": [],
...
