React Native Redux for API Response

A detailed description on the example for fetching list from API response stored in Redux using redux-thunk.

Dependencies Required:

Redux

A central store for state management that can be used throughout the app to store and fetch data from. It is  a predictable state container for JavaScript apps and helps you write applications that behave consistently, run in different environments, and are easy to test.

Redux can be installed using below command. 

npm install --save redux

Redux Toolkit 

The Redux Toolkit package is intended to be the standard way to write Redux logic.

Redux Toolkit can be installed using below command. 

npm install @reduxjs/toolkit

Redux Thunk 

This library makes the actions of redux asynchronous. It is a middleware for Redux and can be used well for async actions such as HTTP requests.

Redux Thunk can be installed using below command. 

npm install redux-thunk

Redux Logger

This library is a middleware for Redux and is used to track whats happening in Redux displaying logs on the same.

Redux Logger can be installed using below command. 

npm install redux-logger

Axios

It’s a promise based http client to make api calls inside the app.

Axios can be installed using below command. 

npm install axios

Example

Lets get into the code to see how do we structure the components in order to call api, store in redux and fetch in our main screen.

Inorder to communicate with Redux and fetch the data from Redux, the complete process is done via Reducers. Reducers are solely responsible for storing and fetching data from Redux.

Reducer.js File 

A Reducer is a pure function that takes an action and the previous state of the application and returns the new state. The action describes what happened and it is the reducer's job to return the new state based on that action.

The reducer takes two parameters: state and action. When we initially call Reducer for the first time with undefined, in order for it to return the initialState we need to have a initialState within it.

Also within it we have a function which uses a switch statement to determine which type of action is dispatched and what state is to be returned. In our example for say 

You need to have an initial value so that when Redux calls the reducer for the first time with undefined, it will return the initialState. Then the function uses a switch statement to determine which type of action it's dealing with.

In our example we have initialstate with data and error and action types for success and error from API according to which the state is maintained.

Action.js

Now we will define Action.js where all the actions are dispatched and passed to Reducer to let know what are the changes done. 

In our example we will be handling success and failure actions and on receiving the API response it is dispatched to this component and passed to reducer to know the changes which then stores the change.

ActionCreator.js

This is the component where we will be passing the url from our main screen, fetch the response and dispatch the response success/failure to Action.

Store.js

A store holds the whole state tree of your application, createStore is used to create the store. The only way to change the state inside it is to dispatch an action on it.

Here applyMiddleware is used to utilise middleware such as redux-thunk and redux logger.

We are all done with the Redux now how do we call the api and fetch the redux data from our main screen?

HomeScreen.js

In order to dispatch action and fetch the stored redux data we will use useDispatch and useSelector from react-redux.

In order to use the dispatch action 

const dispatch = useDispatch();

How to dispatch action to ActionCreator and call the API ?

First import the path of ActionCreator

import apiCall from "../redux/ActionCreator";

Next pass the url and doing so the API is triggered and response is stored and state is maintained in Redux through Reducer

dispatch(apiCall(production.fetchUsers))

In order to get the response from redux, useSelector is used and state from reducer is fetched

const responseList = useSelector(state => { return state.apiReducer.data})

And you are done :)

You can find the complete source code here

Stay tuned to my posts  and do share your valuable thoughts if any queries or you would like to share anything on this topic in the comment section and please do like and share my post if this was helpful.

Hope this helped you!!