Redux Toolkit For Fetching Data From API

Redux is an external react library used for state management of our application.

In more easy language, using redux basically, we don't have to pass data from one component to another and another next one(This is called Prop Drilling).

Redux help us to store all of our state in one store and dispatch actions to that store to update the store.

As you can see :

Changes in UI trigger Actions

Actions send to Reducer

Reducer Updates Store

Store Contain State

State Defines UI

Redux is Predictable, centralized, debuggable & flexible

But Not Easy!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Redux Developer Saw this problem and come up with a solution as a redux toolkit.

Redux toolkit is a more simple way to write redux logic.

Let's see this with an example.

For this Small Example, I'm using API from rapid API which has thousands of APIs created by developers like us.

1. Setup File and Folder structure in React App

Create an app and services folder inside the src folder in react app.

This is a new way of writing redux logic

services folder has all the logic to fetch data from rapid API

app folder have store your application.

Now Inside the services folder create a file (i.e. cryptoAPi.js in my example)

In this, we will write the logic for fetching data from rapid API

Now inside the app folder create a file (store.js), this is the store of our app, all the states of our application will be stored here, and every component in our application can use it.

2. Provider

Now go inside index.js and import provider from react-redux and store from (app/store)

Wrap your APP component inside the provider and pass the store to it, so every component can dispatch an action to it and get data from it.

3. Create a Request

Go inside servicer-->cryptoApi.js

We are importing create request and fetchBaseQuery from react toolkit

We create a header and paste our public API key there

we have a base URL variable containing the URL part

we have create request function which takes URL as parameter and combines it with headers to make a request

Now we have a crypto API function that is equal to createAPi coming from the redux toolkit.

It's a function that contains the object.

1st parameter is reducer Path - we named itcryptoAPI

2nd parameter is base query which contains our base URL

and finally, we have all the endpoints.

Our 1st endpoint is getCrypto

At last, we export it using the redux toolkit naming convention

use + Name of endpoint + Query

So for me its-> useGetCryptoQuery.

this hook provides loading state, data, and more flexibility to work with data.

4. Update Store

Inside the store import the config store and the crypto API that we have just created inside the services folder

Ignore the second one, which is similar to CryptoAPI but it is for news.

Now export configStore, which is a function contain object.

1th parametet is reducer,

This reducer have the reducer path of the cryptoAPi we have just created.

Now we can use this in our project.

5. Make request

Inside any component(i.e Homepage) import the query and make request to is,

distructure data and is fetching state from it, do console.log to check wether we get data or not.

Now use this data as you want to

And this is how our final peoject peoduct looks like