React Redux tutorials for beginners-9

React-redux

Welcome to part-9 of the series. You can find part-8 here. We will learn about Async-actions using a react-redux app in this part.

Async Actions

The logic will be quite similar to the one we did in our redux app. Our application will fetch a list of users from an API end point and store it in the redux store.

So, go ahead and create a new file UserContainer.js inside the components folder. Put the basic content in it as of now.

UserContainer.js

Now, create a new folder user inside the redux folder. Inside it create a file userTypes.js and put the below content in it.

userTypes.js

Now, create the file userActions.js inside the same user folder. It will contain our three actions of fetchUsersRequest, fetchUsersSuccess and fetchUsersFailure.

userActions.js

Now, create the file userReducer.js inside the same user folder. It is almost similar to what we made in the redux application. Here, when the user request is send we are making the loading as true. Then we will receive the payload or error from the API endpoint and depending on it we will populate the users array or the error string.

userReducer.js

Now, it’s time to include the action creators in the index.js file.

index.js

Now, we need to include the userReducer in the combine reducer function. So, we will include it in the rootReducer.js file.

rootReducer.js

Redux Thunk Get Request

To make the get request and use the redux thunk middleware, we need to first install two packages of axios and redux-thunk. So, open your terminal and npm install both of them.

npm install

Now, we will apply the redux-thunk middleware to our store. We need to first import it and add it in the applyMiddleware function in the store.js file.

store.js

Next, head back to userActions.js to create our fetchUsers function. Here, we are first importing axios. After that inside the fetchUsers(), wew are first dispatching the fetchUsersRequest and then the axios request to the jsonplaceholder endpoint. Depending on the success or failure, we are dispatching the fetchUsersSuccess and fetchUsersFailure functions.

These will in-turn be received by the reducer function

userActions.js

Next, we will update the UserContainer.js file. Here, we have the usual mapStateToProps and mapDispatchToProps from where we are receiving the user state and dispatching the fetchUsers().

Inside the UserContainer, we are using useEffect to dispatch the fetchUsers once. Now, in the return statement we are using ternary operator to get to the users array and then displaying it.

UserContainer.js

We also need to include fetchUsers in the index.js file.

index.js

Now, in App.js show the component UserContainer

App.js

Now, back in localhost we can see the users.

Users

This completes our react-redux series.

You can find code till here in this github repo.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

5 Practical Applications of ‘this’ in JavaScript

Headless Browser — A Stepping Stone Towards Developing Smarter Web Applications

How to Create A React Datepicker

How to Resolve Merge Conflicts In Github

The Flatiron Experience Part IV- Capstones-Firebase Auth 2/2

Server Testing Stack with Chai, jsdom, and SuperTest

JavaScript ES2021 Exciting Features

You don’t need webpack for your React Components Library

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

React State Management Libraries for 2022

Learning React with TypeScript by Building an API app

How to start node.js app with pm2

Laravel 9 + Inertia.js + React + TypeScript