Advanced Redux with React Native

If you have followed the previous tutorial on React Native with Redux for Beginners this tutorial will help you to understand how asynchronous actions work since the previous tutorial was based on synchronous actions any web service calls cannot be done due to the functions were pure.

Async Actions:

When a call is dispatched to an async action there are two vital stages that needs to be considered. The start of the action dispatch & the point of receiving an response. In order to tackle the above mentioned scenario’s three action must be defined as mentioned below.

Action to inform about the start action call

When an action is dispatched on the start of the action call it can update the state through a flag which will inform the UI for show a loading spinner.

Action to inform the dispatched action completed successfully

With the successful completion of the dispatched function the reducer can update the state with the response data and reset the loader spinning flag to be hidden from the UI.

Action to inform the dispatched action failed.

Through this action the reducer can be updated to update the loading spinner flag and any error from the API response that can be displayed on the UI.

Below are the action which will be defined for a service call.

Action Types

In order to make API requests a third party library will be used which is called axios. To install the npm package type “npm install react-native-axios — save” within the terminal of the app directory.

The action for the service call will be accompanied with three action type methods which will be dispatched on the three scenario’s as described above with another method to execute the actual service call which has been defined in the mapDispatchedToProps method that is provided by Redux.

A web service provided by reddit will be used to demo the async action on how to data is fetched.

The action for the service call will be written as shown below.

Service Action

As shown above within the callWebservice method three action types has been dispatched for each response from on start until a response is received irrespective of success or error and thereby the reducer will update the status accordingly which is shown below.

Service Reducer

As shown above for each action that is dispatched the state is updated accordingly to notify the UI Components. If no action is dispatched a default state is returned to comprehend with the UI.

Middleware

In order for the async functions to execute in an appropriate manner a middleware has to be implemented which is explained below.

“Redux middleware solves different problems than Express or Koa middleware, but in a conceptually similar way. It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer. People use Redux middleware for logging, crash reporting, talking to an asynchronous API, routing, and more.”

In the current application we will be using two different middleware libraries based on redux.

Redux Thunk: allows to create async functions instead of pure functions that can delay the dispatch of an action which is necessary while API are accessed.

Redux Logger: allows to log information within the console in a very descriptive manner which is list the current, previous & next state while hi-lighting the state changes that will take place as shown below.

Redux Logger Console Logs

In order to apply the above described middleware few redux components must be used.

applyMiddleware: with the help of this component provided by redux the above middleware’s can be bound to the application.

compose: is used when multiple store components needs to be applied to increase the functionality of the store it self such as the redux-thunk & redux-logger.

The redux store and middleware configuration is shown below.

Store & Middleware Configuration

As explained in the previous tutorial the store binding will be done within the initial point of the application and passed down to the other application components as shown below.

Initial Start Store Bind

The below code will be the component on which the above written reducer and actions will be executed. Which will have a list view and an activity indicator which will be changed as the redux store is updated through the executed actions.

UI Component

If the application is being testing on iOS make sure that “App Transport Security Settings” are configured properly.

Hope this clears the doubts on why a middleware is necessary and how to execute async actions.

The code can be downloaded for the link below

https://github.com/ImranHishaam/redux_middleware_example