Announcing a general way to make developer life easier for calling API in React-Redux.
--------------------------------------------------------------------------------------

Recently, I’ve switched from backend development to the frontend side. in first sight, I found API call is truly tough.

Why we need to make a type + action + take action (redux-saga)+ handler function 😐 for each API call?? and again a type + action + reducer to store the result. I keep asking my self.

![](https://hackernoon.com/hn-images/1*stv_a1LpjcQlRiuPHA2ffg.png)

I do a lot of research and all sample and document are the same way more and less. like this example:

[**Moving API requests to Redux-Saga**  
_I would like to share with you the story on how we create applications. What tools we use and where we diverted from…_hackernoon.com](https://hackernoon.com/moving-api-requests-to-redux-saga-21780f49cbc8 "https://hackernoon.com/moving-api-requests-to-redux-saga-21780f49cbc8")[](https://hackernoon.com/moving-api-requests-to-redux-saga-21780f49cbc8)

So I think to the other way, something more functional.

### API Client

API client is a structure to handle the most API call in one place without duplicate codes ([DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)). I’ll explain this structure using redux middleware but you can implement it in your way. Even in another middleware library like Tunk or Saga. As you can see the explanation is so simple and straightforward. I try to make it easy to understand

![](https://hackernoon.com/hn-images/1*FGSmrOpvIxlcick6CmQ37g.png)

#### Implementation

API Request is our base API class. you can define it like this:

> I use [Carbon](https://carbon.now.sh) to generate this images for code snips. you can see full implementation in my GitHub.

![](https://hackernoon.com/hn-images/1*v5l2nN_nCp6lWTIocqPCmw.png)

Whenever you want to call an API you need just create an instance of this class and dispatch this action to redux.

We can create an action function:

![](https://hackernoon.com/hn-images/1*TxIUOd0UTd2gwDv97MaB9Q.png)

![](https://hackernoon.com/hn-images/1*MazwglnS9sBGEbmySxj1hg.png)

By using this function we can also use call API directly in a Promise (if it needed).

For the response, we can define APIResponse class:

![](https://hackernoon.com/hn-images/1*MGGJlHStqLr267zSDxyk6g.png)

Now we need to handle the request and complete the puzzle. **The redux middleware** (I use [Axios](https://github.com/axios) to sending the request):

![](https://hackernoon.com/hn-images/1*1jK8kYBWtslAG3sZEc2bhA.png)

### How to Use it?

Calling API can’t be easier than it 😎 like the general way we can use redux connect in the component to send a request and receive a response.

![](https://hackernoon.com/hn-images/1*6m7eRUHIS5BuB6ev094iAA.png)

### How to Customize?

You may think of some specific scenarios and how you can handle it with this structure. What solves my problem was this tow powerful option:

#### Option

With options. You can define an options object as you need. Something like this

![](https://hackernoon.com/hn-images/1*a-Srz8z79fGYAxzIm15zpA.png)

You can define an option for save response in store or show a message after the operation and anything based on your need.

#### Middleware

The other thing can give you more control is middleware. If the option is not enough for your need you can define middleware interface like this:

![](https://hackernoon.com/hn-images/1*mAEpq4Gl5X9p8qs9ie0Ztw.png)

Now implement this interface and add it to request object to get full control over request flow.

We need to change APIRequest class to support option and middleware.

![](https://hackernoon.com/hn-images/1*ruIe6_znfnmKMNDctFvLqQ.png)

### Beyond

You can even make it better. for example with this structure, you can easily handle all changes in local store to avoid duplication. More specifically you can implement a flow to delete the record from the local store after sending DELETE request In general.

As I mentioned before I want just to give you an idea about what am I means. if you are interesting you can see a full demo in GitHub:

[**PejmanNik/redux-call-api-sample**  
_Sample project for call API in react/redux for my medium post…_github.com](https://github.com/PejmanNik/redux-call-api-sample "https://github.com/PejmanNik/redux-call-api-sample")[](https://github.com/PejmanNik/redux-call-api-sample)

![](https://hackernoon.com/hn-images/1*sjxEouS3EaXpavvo6NxfBw.png)

Flow

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

ANOTHER way to call restful API in Redux

Too Long; Didn't Read

Coin Mentioned

@pejmanNik

RELATED STORIES