Redux was created to manage state across the application. It provides several tools to decrease the complexity of handling the global application state.
The new additions to the React library, useContext and useReducer, also came to manage the state of a React application. However, it has a subtle difference from Redux, which I'll clarify further below.
But first, let me introduce you to React Hooks.
React Hooks is the new way of handling state and life cycle into React components, without relying on component classes. It was introduced in the 16.8 version of the library and has the intention to decrease the complexity of the components, by sharing logic between them.
React Hooks provides an easy way of handling the component behavior and share the component logic.
The React Hooks feature doesn't have the intention of replacing the previous knowledge of React concepts like lifecycle, state, props, context, and refs.
With React Hooks, we can write our custom hooks to extract logic that will be used in more than one component and implement the D.R.Y (Don't Repeat Yourself) pattern.
In the snippet below, you can see an example of custom hooks written for one of our projects:
Okay, now that we know React Hooks, let's take a look at Redux.
Redux is a library for managing the global application state. In this library, we can find several tools that help us, developers, to be in touch with the state of the application and also transform it by giving the user the ability to emit actions.
Redux, as the documentation says, can be described in three fundamental principles:
store.store is by emitting actions.store, the reducer should be written as a pure function.Redux even updated the library with its custom hooks. These can be used to integrate the components that use the React Hooks features to access data from the store and dispatch actions without relying on the components classes.
Now that we are a little more familiar with Redux and React Hooks let's see the difference between them.
Both of them handle state management, but with several differences. There is a lot of abstraction into the following sentence, but this seems like a golden rule to know when you should use Redux into your application:
Redux should be used in applications that have several features. With these features sharing chunks of the same information.
While using the useContext and useReducer, the Redux functionalities can be reproduced. Redux offers some free tools that help us to manage the application without reinventing the wheel. It also offers us the following:
connect() function.
Let's understand a little more about the actual React addictions, React Hooks, to manage the global state and its ideal use.
The useContext hook comes to access the state that is shared by the providers. The best-case scenario to use the React Hooks useContext is in a small application or to share small pieces of information across the components, like the theme of the application. The useContext has two principal concepts, and they are listed below.
This provider creates the theme object that will be used in all applications and one function to update it, the setTheme. In the snippet below, you can check the setTheme in action.
In the snippet above, we can check the use of the global object theme to set the background color of our application.
After getting to know the useContext function, there is one more that confuses the developers. The useReducer hooks. In the section below, I will be walking through this functionality and explain its use case.
The useReducer hook should be used in components that have complex logic behind it. It shows as the main confusion with the Redux library, because developers tend to think that useReducer could replace the state manager library. But in fact, its use should be restricted to components. This is mainly because the global use of useReducer demands rewrites of new code to features like the control of components update.
Now that we understand the use case for the useReducer hook is time to show some action. In the example below, we are using the new React Hook addiction useReducer to control one component with different states.
Let's take a deep look at the useReducer input and output parameters.
The declaration of the useReducer hook will most likely look like this:const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
Where we can identify that the useReducer hook receives two parameters, as shown below:
The first output parameter of the hook is the actual component state. This state should be used in our application to represent the data.
It also follows the same rule of the React state, that is:
Never write directly to the state and the state should be updated by emitting actions.
The actions that will be dispatched by our components should be always represented as one object with the type and payload key. Where type stands as the identifier of the dispatched action and the payload is the piece of information that this action will add to the state.
By adding all these pieces together, we can see the final result in the application below:
Redux and React Hooks should be seen as complements and also as different things. While with the new React Hooks additions, useContext and useReducer, you can manage the global state, in projects with larger complexity you can rely on Redux to help you manage the application data.
If you’re thinking about building an application, both can be used. While Redux holds the global state and actions that can be dispatched, the React Hooks features to handle the local component state.
Javascript developer since 2016, I've built mobile apps using Ionic and React Native. Guitar player and cooking lover.
People who read this post, also found these interesting:
