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": [],
    "filter": "all",
    "newTodo": ""
}

Right now, whenever text is entered, we need to dispatch an action, compute the new state by calling all reducers, and then update the Redux store state. As you can imagine, this can get quite performance heavy if we have many input fields. Instead of storing the newTodo field in Redux, we should use a State Hook to store this local state, as it is only used internally by one component. We have already done this correctly during the implementation of the AddTodo component in our example app.

Now that we have learned how to migrate existing Redux applications to Hooks, we can move on to discussing the trade-offs of Redux.