#contextapi

State management is one of the most critical aspects of building React applications, especially as apps scale and become more complex. React provides several tools and libraries to handle state management, each with its strengths and weaknesses. Three popular choices are Redux, Context API, and Recoil.

We created the dice simulation program using three approaches. Flux pattern https://zamjad.wordpress.com/2023/09/10/flux-design-pattern-using-typescript-in-react/ Reduc https://zamjad.wordpress.com/2023/09/22/dice-simulation-using-redux/ and useReducer https://zamjad.wordpress.com/2023/09/24/dice-simulation-using-usereducer-hook/ Now let’s do the same with Context API. Context API introduced in…

React Navigation 5 Authentication Flow

In this blog we are going to see how we can integrate Authentication Flow in React Navigation 5. I am going to cover all the points which is necessary in the integration. Because I personally face many problems regarding this implementation. I am using Context API for this. So before starting the blog we should know about Context API. What is Context API in React? The React Context API is a way…

If you’re having a Javascript background then you might be familiar with the terms Redux and Context API. And probably, you might have come across so many blogs that debate on which is better- Redux vs Context API. I assumed the same unless I realized it’s not!

After reading a bunch of blogs, I concluded the purpose of both the tools and how different they are from each other. If you aren’t aware yet, don’t worry this tutorial will help you understand the use cases of both tools with a basic demo example. Here, we will build an app using both approaches and discuss them.

Let’s get started, then!

Tutorial Goal

Understanding Redux and Context API

Comparing the working of Redux and Context API

Exploring the purpose and use case of Redux and Context API

A demo application using Redux and Context API approach

Redux: Introduction and Building Blocks

According to documentation-

Redux is a pattern and library for managing and updating application state, using events called “actions”. It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion.

The documentation clearly mentions that redux is for “managing state” and understanding how the state is updated.

Use Cases of Redux

The primary goal of redux, as mentioned in the doc, is to manage and keep track of the state.

Keeping your state management logic separate from the user interface layer

Faster logic debugging

Redux is mainly used to manage the state of React applications in a centralized place where to access the state anywhere in the application. Technically, The concept of Redux is based on Flux architecture and this concept isn’t restricted to React apps; there are implementations in different technologies, as well (e.g. NgRx for Angular). But Redux is particularly implemented with React.

Packages needed

redux: For the functions like createStore(), combineReducer() etc.

react-redux: For the functions like connect() etc.

Building Blocks of Redux

It consists of mainly four building blocks:

1. Reducer: These are functions with state and actions passed in as arguments. It contains “action.type” in switch cases which returns the changed value. It optionally accepts the payload (generally created in a separate file known as reducers.js)

2. Store: Store is the collection of all data. You can pass it to the provider.

3. Provider: A React component that accepts store as an argument (usually created in index.js)

4. Actions: Functions that provide/return action type and payload to the dispatcher which will further call the respective reducer (generally created in a separate file known as actions.js)

Context API: Introduction and Building Blocks

React documentation explains context API as- Context provides a way to pass data through the component tree without having to pass props down manually at every level.

In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.

If you can observe the documentation states context for “passing” and “sharing” values and mention nothing about “managing the state”

Use Cases of Context API

The main purpose of using context API is avoiding ‘prop drilling’ – passing prop at every level. It is more like a pipeline used to pass values from one end to another.

Context API provides the easiest way for passing data through the component tree so that you don’t have to pass props down manually at every level. For example, assume we have a component tree consisting of A, B, C, and D components. Now you need to pass props from A to D, so rather than passing it A > B > C > D,i.e., to every component, with the help of context you can directly pass to A > D.

Now, many blogs have mentioned that Context API is the best replacement for Redux because it’s in-built and you don’t have to install dependencies for the same. Is this really true- Can Context API replace Redux? We will discuss this in a further section. Stay tuned to explore!

Building Blocks of Context API

We can divide the Context API into three blocks: 1. Context: Use createContext() function that takes the default value as a first argument. Here it is optional to pass a Javascript object. You can implement multiple contexts in your app.

2. Provider: After creating context, the Provider provides the capability for accessing the context. It provides functions & data to pass values further to the component.

3. Consumer: Consumer allows access to the value to child components which are wrapped by Provider. It has two types-

Context.Consumer: Context.Consumer can be used for both functional and class-based components. However, through this approach, the context is accessible within the render method only.

Static ContextType: Static contextType can be used only for Class-based components.

Redux and Context API Example

The example below is based on a Counter. The initial value will be 0 and it has two buttons to increment and decrement the value.

Inside the main parent counter component, there will be three child components-

one for changing the counter value two for each of the buttons.

The initial setup would be the same for both Context and Redux approaches.

How to Use Context API in a Next.js App

Technology is changing day by day. After the success story of the React.js library, developers are behind a React.js framework which is Next.js. Next.js helps to build production-ready web applications in record time. Popular companies like Netflix, Tiktok, Hulu, etc. are using Next.js already for web development. Here we are going to integrate Context API in a Next.js app for better state…

Complete React Developer In 2019 (W/ Redux, Hooks, GraphQL)

Become a Senior React Developer! Build a massive E-commerce app with Redux, Hooks, GraphQL, ContextAPI, Stripe, Firebase

What you’ll learn

Build enterprise level React applications and deploy to production

Learn to build reactive, performant, large scale applications like a senior developer

Learn the latest features in React including Hooks, Context API, Suspense, React Lazy + more

Mast…