Difference between Context API and Redux
1.What is Redux? and What is Context API?
Redux is a state management tool that we can use in our projects most commonly used with JavaScript libraries such as React or Angular to build UIs, however, the usage is not limited to those libraries. It can be used with other frameworks. It provides a centralized store for storing states and logics and gives you the components that allow you to directly access the data. With Redux, you can create complex applications with consistency throughout your application. Recently It has been the industry standard.
On the other hand, Context API is the build-in application-level state management feature in React which was introduced in React version 16.3. It allows us to effectively produce global variables that can be passed around. You can pass the props from a parent component to a child component or even to a grandchild component.
2.Context API vs Redux
In Context API, there are two important components: provider and context. Provider is a React component with a state which returns JSX. Context is what you can create using a function called createContext(). Below is the structure of Context API .
In the code above, we create a new context called ExampleContext as well as the state. number with React Hooks. Then we export both. The props.children refers to the child component inside the Provider component. In order to make the ExampleProvider actually provides the application with the global states, we can import the provider into the most top-level parent component, usually in App.js, and wrap it with that provider.
Now we can use useContext() to use the context inside the child component. That way, we can update the state called number, with the method, setNumber inside the child component without passing the props from a parent to a child component.
With Redux, there are four components to manipulate: reducer, store, provider, and action. Reducer is the function that takes state and action as parameters to update the state. It works with switch-case statement with the case name coming from action.type. Store is acting like a hub where all data is passed through to the provider. Provider, almost does the same thing as in Context API, instead of taking value, it takes stores as arguments so that it can provide the arguments with child components in your application. Action is one of the triggers that can be dispatched to a reducer so that the methods in the reducer can run. Below is an example of how Redux works.
In the reducer file, we can create a switch-case statement to define methods based on the action type. We can create and assign an initial state at the same time.
When we access the state from the store, we can use useSelector() provided by React-redux. The useSelector() function takes in a callback function and returns the required reducer that has access to the state you want.
To update the state, you can import and use useDispatch which will let you dispatch an action.
3. When to use which?
Context API is suitable when you create a small application with minimal state changes. While Redux is perfect for the application with frequent state updates. Below are the cases when Redux is most useful:
- You have larger amounts of application state that are needed in many places in the app
- The app state is updated frequently over time
- The logic to update that state may be complex
- The app has a medium or large-sized codebase, and might be worked on by many people
- You want to be able to understand when, why, and how the state in your application has updated, and visualize the changes to your state over time
- You need more powerful capabilities for managing side effects, persistence, and data serialization
The main advantage of using Context API over Redux is that instead of importing and using actions, you can easily manipulate the state directly on the component which you are currently working on. Also, it creates a simpler structure with fewer codes. Moreover, since Context API is the build-in React solution, there is no need to worry about the third parties implementing new changes.