Context API Vs Redux

Introduction

To get into the discussion of context API vs redux we first have to clear some concepts of data flow in applications.

One of the functionalities of an application is to send data from one component to other. Developers use prop drilling to pass data between the disconnected components in React.

By default, there is no global state that the components can access, so if we have to pass data then we have to use props to pass the data between components at different levels. This results in a lot of repeated code and also a lot of bugs.

To solve the problem of prop drilling we create a global state that all the components can access, regardless of what level of nesting they are at.

What Is Redux?

Coming to our first contender of context vs API discussion, Redux.

Redux is an open-source library that behaves like a central store where all the data of the application is stored. Redux contains actions that are used to modify this central store. This store of redux is shared across the entire application and is updated predictably, thus it reduces the chances of many bugs that are related to state updates.

One thing to note here is, Redux is not only limited to React, it can be used with other frameworks also like Angular and Vue.

In Redux there are three main concepts:

• Actions
• Reducers
• Store

Let's understand these in detail

Actions

The only source of data for the store in Redux is actions. Actions are objects that are used to send data to the store. An action object has two properties:

• type
• payload

The type attribute tells what type of action is performed, this tells us what the action has done.

The payload is an object that contains the data that your reducer will use to update the state. This is the data that we want to pass around the components or store in the state.

This is how an action looks in redux

Explanation

Here we make a simple arrow function that takes the payload as an argument and returns a type and payload.

You can notice that in type we have used uppercase letters. This is a common naming convention that programmers follow to describe the type.

Example: ADD_DATA, ADD_USER

Reducers

Now that we know what needs to be done from the action, we need to write the code that will perform that task. This is where reducers come in.

A reducer is a pure function where the implementation of the action based on the action's type is present. The reducer takes in the current state which is the global state then performs the action and returns a new state.

Let's look at an example of a reducer

Explanation

We have created a function that accepts state and action as arguments. First, we extract type and payload from the action that is passed as an argument. Then we can write a switch or an if-else ladder to decide what to do based on the type of action.

Store

A popular way to describe the state is Single Source of Truth. This is true because storing all the data in a single place allows us to manage it easily and reduces the possibility of bugs.

So we can say that the state of the application is housed in the store. One Redux application can have only one store.

Creating a store is super simple

What Is Context API?

Now let's put some light on the other contender of context API vs redux discussion, the Context API.

Context API was introduced with React v16.3. React Context API solves a basic problem that we face in most of the React apps: How do we pass data from one component to another if they are not directly connected?

One solution to this problem is Prop Drilling which is a naive way and it introduces a lot of unnecessary code.

React Context API enables us to share data between components without using props. What React Context API does is, offers a means to transfer data along the component tree.

React Context API has three main things

• Context
• Provider
• Consumer

Let's see how we can create and use the Context API in React

First, we create a context by using the createContext hook

The job of the Provider component is to make the state available to all the child components. A value prop is passed to the Provider component where we pass our current value.

Now we will wrap the parent component with the <Provider/>

Now we can consume the value of context anywhere in the <AppProvider/> component with the help of the useContext hook.

Difference Between Context API and Redux

Let's look at the differences between Context API and Redux for the context API vs Redux discussion.

Example

To better understand Redux vs React Context API we will go through two examples.

We will build a Theme Switcher and a Counter in both Redux and React Context API. This will help us to better understand both approaches.

The Redux Approach

Theme Switcher

First, we will create a store

Then create the actions

Finally, create the reducers to handle the actions and state updates

Now that our setup is done we can use this inside our application with the help of a Provider from react-redux.

Counter

First, let's create actions

Now the time for reducers

Let's make the store

No, we have to wrap our app with <Provider/>

We can use useSelector() and useDispatch() hooks to access the state anywhere in our code.

Context API Approach

Theme Switcher

First, we make a Theme Context.

Now we will create a Provider

Now we will wrap our app with this Provider

Counter

First, we make the context

We also have to make the reducer

Now we will provide the context

Now we will consume the context

Now we can write the implementation of increase and decrease functions