What is an API ?

An API is a set of rules and protocols that allow different software applications to communicate with each other.

Types of APIs

REST APIs - REpresentational State Transfer

SOAP APIs - Simple Object Access Protocol

GraghQL APIs - A Query langugage for APIs

WebSocket APIs - WebSocket APIs provide full-duplex communication channels

RPC APIs - Remote Procedure Call

What is API end point?

An API endpoint is a specific URL within an API that allows clients (such as web applications, mobile apps, or other software) to interact with the API. It represents a specific resource or functionality provided by the API.

Consider a hypothetical REST API for managing users. It might have endpoints like:

• GET /users: Retrieves a list of all users.
• POST /users: Creates a new user.
• GET /users/{id}: Retrieves details of a specific user identified by {id}
• PUT /users/{id}: Updates information of a specific user.
• DELETE /users/{id}: Deletes a specific user.

Each of these endpoints handles a specific operation related to users, using different HTTP methods to indicate the type of operation (GET for retrieving data, POST for creating data, PUT for updating data, DELETE for deleting data).

Make API call from React app

Making API calls from a React application is a common task, typically done using JavaScript's fetch API or third-party libraries like Axios.

Make API call from REDUX for State Management

To handling asynchronous actions in Redux, two popular middleware libraries are commonly used redux-thunk and redux-saga. Both serve the same purpose of managing side effects (such as API calls or asynchronous operations) in Redux, but they differ in their approach, complexity, and the scenarios they are best suited for.

When to use redux-thunk?

Use redux-thunk for applications with straightforward async requirements, such as basic API calls and simple async flows.

When to use redux-saga?

Use redux-saga for applications with complex async requirements, such as managing multiple concurrent API calls, handling race conditions, or orchestrating advanced async flows.

Note: In this article, I am using redux-thunk to handle asynchronous actions in Redux

Make API call from redux-thunk

A thunk is a function that wraps an expression to delay its evaluation. In Redux, a thunk action creator returns a function instead of an action object. This function can have side effects, like async API calls, and can dispatch actions based on the results of those calls.

Consider the following diagram that explains you the flow .

Let us implement the flow .

• Create Redux Store

• Create a slice to make API call to external API with redux-thunk middleware

extraReducers property contains a Function that allows you to add additional reducers that respond to actions outside of those defined in reducers. It uses the builder API from reduxjs/toolkit.

.addCase() Adds a reducer case for a specific action type.

• Provide Redux store to Root /Parent component

• Consume Redux store in a component

Hence, the way to make API call from redux using redux-thunk middleware implementation is completed.

Now, let us see , how to make same kind of API call using Zustand

Make API call with Zustand

I have already introduced Zustand in previous article

Zustand is a state management library for React that aims to provide a simpler way to manage global state with a minimal API and without the overhead of additional dependencies like Redux. It's often used when you need a lightweight state management solution, especially suitable for smaller to medium-sized applications.

• Create store using create() function of Zustand

• Consume usersStore in a component

That’s it.👍

Its quite simple to use Zustand over Redux for applications with simple state management .

Thanks for Reading...

Kindly let me know if i miss any valid point in this.