Simple React Redux App

Redux logo

In todays tutorial we are going to learn how to integrate redux with reactjs.
Before we start the tutorial you need to understand the concept of immutable data and why we need to use immutable data in the first place.
You can watch the following video to get the gist of it:-

Functional programming

If you are completely new to redux you can get idea about its basic components in this tutorial: Basics of redux

Now let’s get to creating a basic react app:-
1)You can get basic react redux starting code from this repo:

reactreduxstarter

The starter repo’s package.json contains all the npm packages that are required for this tutorial

• Axios in a npm module for making ajax(GET/POST) requests to server
• React-redux is npm module for implementing redux in react
• Redux-logger gives us transition in states caused by various actions in console
• Redux promise middleware enables robust handling of async code in Redux
• Redux Thunk middleware allows you to write action creators that return a function instead of an action

If this seems a little confusing then don’t get overwhelmed as we are going to cover there detailed uses shortly.
Run npm install once you clone the repo to install all npm modules.
Open App.js in src folder

Here we have rendered basic react component inside main div.

2)Create a new components folder and create Main.js with the following code:

Here we are rendering Userlist component which will display a list of all users fetched from api.

Create userlist.js in same folder and create basic react component using following code:

Now that we have basic react components ready we can test our code using command:
npm run server

You can head over to localhost:8080 in your browser to see the basic web page.

react basic boilerplate

reduxstarter

Let us start integrating redux components step by step:
First we import Provider(line 3) from react-redux and inject a store(line 8) in main app.js provider:

3)Next we create a store.js and write the following code:

A store is central data storage hub where we store all our state values.

First we import applyMiddleware used to insert middlewares into the redux to handle processing of data,requests and log various activities.

Note:Logger must be the last middleware in chain, otherwise it will log thunk and promise, not actual actions

Here reducers are links which are used to pass data from actions to store as well as get data from store into various components.

We pass reducer as well as middleware to createStore on line 12.

4)Now create reducers folder and create index.js within it:

By default when we specify a folder to be imported it picks up index.js as default from the folder.

A redux app can have single as well as multiple reducers.Here we are using a single reducer but we have made provision multiple reducer by simply importing them after line 3 adding them on line 6.

Here combineReducers does the job of setting multiple reducers to single store which can be used for various purposes.

Now create userReducer.js in the same reducers folder with the following code:

A reducer takes two arguments viz the initial state of all variables/properties attached to it and action.

Depending the type of action the reducer passes modified properties back to store.

Here we are going to fetch a list of users from a rest api.

If ajax request to server succeeds then we will pass FETCH_USERS_FULFILLED action which will populate users array and if it fails then we pass FETCH_USERS_REJECTED action which will pass response to error property.

5)Now create actions folder in src folder and create a new userActions.js file in actions folder with the following code:

We are using fake json api generator link to simulate json data from server.

Here axios is used to execute GET request to server and pass data as response.Since we are using promise middleware we use then to execute actions after we get data from server and catch if request fails.

We dispatch FETCH_USERS_FULFILLED action if ajax request succeeds in which response data is passed as payload to reducer.

6) Now make changes to Main.js in components folder with the following code:

We first import connect module from react-redux(line 4) and then make a connection to store to retrieve variables/properties(line 8).In order to execute action we make use of react lifecycle method “componentWillMount” which triggers the rerender of the page.

We are logging the props.user to see changes in the values of the user props which will be as follows:

reduxlogs

As we can see from the console the userprops is initially an empty array which is populated with the result after ajax request.

We are passing userprops from store to userList component on line 25

7)Now make the following changes to userList.js with the following code:

On line 7 we check if userprops is populated with data and pass empty div initially.

On line 10, we create multiple User components using map function

8) Next create User.js in components folder and paste the following code:

Finally a little css to page to make the ui a little better

The final page will look like this:

The file tree of the entire project is:

If you want to create minified bundle.js file stop npm server and run npm run build Next go to index file and change change script src path:

<script src="./dist/app.bundle.js"></script>

You can get entire source code for this app at the following link:
Reduxuserapp

You can check out my other tutorials at:

SaurabhNative Blog

Please recommend the article by clicking 💙 at the bottom if you like it and post your feedback/doubts/suggestions in the comments.