Developing a React Redux Application Using createreact-app

This article explains the development of a React application, using Redux for state management, interfacing with the Express framework for data and using create-react-app as the frontend build pipeline.

React is a JavaScript library for building user interfaces, and can be used to build single page applications. It is focused on creating the V of MVC, i.e., the View layer. Using a concept called Virtual DOM, components can be rendered with a good performance. There is large amount of state that needs to be managed by single page applications. The state includes server responses, cached and locally created data, and various UI states. Redux is a popular framework for managing the state. The data displayed by the client side UI can be provided from a back-end server. Express is a commonly used Web framework based on Node.js. This article explains the development of a React application using Redux for state management and interfacing with the Express framework for data, along with using the create-react-app for setting up the development environment. The create-react-app seamlessly handles the front-end build pipeline, enabling us to focus on writing the application logic.

To get an understanding of this article, readers should know the basics of React, Redux, Express.js, and Node.js.

Contacts application

The concepts of developing an application using React, Redux and Express will be illustrated through a Contacts application. We will keep the application simple, as the main objective is to illustrate the various concepts in an easy to understand manner. Using the application, we will be able to view the Contacts list, add a new contact and delete a contact. We will also use redux-thunk, a middleware, to perform the action asynchronously.

Setting up the development environment

We will develop the application using Windows as the development machine.

1. Install Node.js from https://nodejs.org. Download the 32-bit or 64-bit binary depending upon the architecture of the system.

2. Install create-react-app, using which we will start building the Contacts application.

npm install –g create-react-app

3. Generate the basic code template, which we will modify to add the features required for the Contacts application.

create-react-app contacts

This will create a directory called contacts in the current folder. Inside that folder, we can see an initial project structure generated; the required dependencies are automatically installed.

4. Change to the directory contacts. Check if the set-up is proper, by running the basic application:

npm start

This will start the application in development mode and ‘Welcome to React’ will be displayed.

5. Install the modules for Redux integration:

npm install –S redux npm install –S redux-thunk npm install –S react-redux

6. Install the modules, toastr and jquery, to display status on the browser when performing UI actions.

npm install –S toastr npm install –S jquery

7. Install the HTTP client module, axios, to get data from the server.

npm install –S axios

8. Install the express and body-parser modules to serve the persistent data required for the Contacts application.

npm install –S express npm install –S body-parser

9. To proxy API requests during development and avoid CORS issues, update package.json present in the contacts folder with the proxy setting (assuming that the Express server runs at port 4000).

"proxy": "http://localhost:4000"

Now we can start working on adding the features required for the Contacts application. While explaining the implementation, main code snippets have been provided. For the complete code, please refer to the GitHub repository at https://github.com/srini-wip/react-reduxcontacts.git.

Serving the data required by the Contacts application using Express

We will now implement the code to serve the data required by the Contacts application using the Express Web framework.

Create a file server.js under the folder contacts. To provide the list of contacts, we will implement the API endpoint /api/ contacts using the GET method. This will read the JSON file, contacts.json, for the list of available contacts and send the response as JSON data. app.get(‘/api/contacts’, function(req, res) {

// read from JSON file and send the response as JSON data });

To add a contact to the contact list, we implement the API endpoint api/contacts using the POST method. To retrieve the data sent by the browser, we use the body-parser middleware, which inserts the required data in the request object, from which we can easily extract and save it to the JSON file.

app.post(‘/api/contacts’, function(req, res) {

// extract the data and save to JSON file });

To delete a contact from the contact list, we implement the API endpoint api/contacts/:id using the DELETE method. This will delete the contact and update the JSON file.

app.delete(‘/api/contacts/:id’, function(req, res) {

// delete the contact and update the JSON file });

Implementing the user interface using React and Redux

We will now implement the set of features on the client side using React and Redux. First, we will create the folder structure required for writing the code to manage the state and view. This will help us in organising our code better. We will create the folders store, reducers, actions, api, components under the src folder.

Configuring the store

Create a file configureStore.js in the folder store. Initialise store using the createStore API of Redux. We need to provide the rootReducer, initial state (if any) and then a store enhancer. Since we will use redux-thunk, to implement asynchronous actions, the last parameter will be the thunk middleware.

createStore( rootReducer, initialState, apply Middle ware( thunk ));

Implementing the reducers

Create a file contactReducer.js under the folder reducers. When the store dispatches an action, it passes to the rootReducer, the state maintained in the store and the action. While creating the rootReducer, we have combined all the individual reducers of the application using the combineReducers API. In our current application, we have only one reducer, i.e., for contacts, which we will create shortly. Although we have only one reducer, it will be useful to use the combineReducers API because we can extend it to add more reducers as our application expands in the future.

rootReducer = combineReducers({ contacts });

The rootReducer will pass the action and the respective state to each reducer. We will implement the reducer function contactReducer accepting two parameters—state and action. The reducer is supposed to handle the action it is interested in and return the new state. The important thing to understand is that the reducer is a pure function, and it should not mutate the parameters and return a new state in an immutable way using only the values passed in the parameters. In contactReducer, we will handle the actions – successful loading of contacts, successful addition of a contact and successful deletion of a contact.

export default function contact Reducer( state= initial State. contacts, action) { switch (action.type) { case ‘LOADED_CONTACTS’:

// Return contacts

case ‘ADDED_CONTACT’:

// Add new contact to state and return

case ‘DELETED_CONTACT’:

// Delete contact from state and return

default:

// Return state passed as parameter

Implementing the actions

Create a file actionTypes.js in the folder actions to store all the action names as a constant. Having the action types as a constant will help in better maintenance of code rather than having them directly as a string.

Next, create a file contactActions.js, in which we will implement various actions related to Contacts. We will implement the actions—loading of contacts, adding a contact and deleting a contact. As we will communicate using the REST API calls with a server in the backend, we will make asynchronous calls and, hence, we will use the middleware, redux-thunk, to perform asynchronous dispatch. The thunk function will invoke the Contacts API (discussed below), which will communicate with the server and fetch or add/modify the data based on the action. The Contacts API will use the npm module axios to make

REST API calls to the Express server. The Contacts API will perform the necessary task and return either success or error. If success is returned, then the corresponding success action —load, add or delete—will be dispatched, after which the reducer code discussed above will get executed.

export function loadContacts() { return function( dispatch ){

// Invoke Contacts API to load contacts and process // successful result or error

};

}

export function add Contact( contact ){ return function( dispatch ){

// Invoke Contacts API to add contact and process // successful result or error

};

}

export function delete-Contact(id) { return function( dispatch ){

// Invoke Contacts API to delete contact and process // successful result or error

};

}

Implementing the API invocation

Create a file contactApi.js in the folder api. We will implement the APIs getAllContacts, saveContact and deleteContact. To implement the invocation of these APIs, we will issue REST API calls to the Express server using the npm module axios.

export default class ContactApi { static getAllContacts() {

// Invoke REST endpoint ‘/api/contacts’ using axios.get }

static saveContact-(contact) {

// Invoke REST endpoint ‘/api/contacts’ using axios.post }

static deleteContact-(id) {

// Invoke REST endpoint ‘/api/contacts/<id>’ using axios. delete

}

}

Implementing the UI components

We will now use React to implement the UI components. Also, we will use the react-redux module to interface

React with Redux.

Create a file ContactsComponent.js in the folder components. Here, we will implement the top-level React container component, which will interface with the Redux store. We will write the method render, which will return the JSX to generate the Virtual DOM for the Contacts display and also a form to get the inputs from the user for adding a contact. Also, each contact will render itself using a separate React component, Contact-Component. Then, we will write

addContact and deleteContact methods, which will dispatch the add and delete actions we had discussed earlier.

We need to access the Redux store to receive the state changes and to dispatch actions. The React container component Contacts Component will interface with the store using the connect API provided by the react-redux module. The connect API accepts two parameters – a function (which we will name mapStateToProps) that receives the state from the store, and another function (which we will name map Dispatch To Props) that receives the dispatch method. The return value of the connect API is a function to which we will pass the React container component Contacts Component as a parameter, and then finally export it.

class Contacts Component extends React. Component{ render() {

// Return the JSX to display Contact list and the Contact form

} }

function map State To Props( state, own Props ){ // Return an object containing state details }

function map Dispatch To Props( dispatch ){

// Return an object containing action dispatch details }

export default connect( map State To Props, map Dispatch To Props) (Contacts Component );

Create the file ContactForm.js under the folder components. We will implement the code to get the form inputs from the user for adding a contact. This will be a React presentation component as it need not directly interface with the store. It will pass the input information to the container component, Contacts Component, which takes care of interfacing with the store.

export default class ContactForm extends React.Component { render() {

// Return the JSX to display input elements } }

Create the file ContactComponent.js under the folder components. We will implement the code to render the contact information:

export default class Contact-Component extends React.Component { render() {

// Return the JSX for a contact } }

Implementing the startup code

In the file index.js under the src folder, remove the code generated by create-react-app and add the code to implement the startup code of the application. We will invoke the configureStore function discussed earlier. Next, we will dispatch the action to load the contacts. Then we will render the top level Contacts Component by wrapping it inside a Provider component provided by the react-redux module. We wrap it inside a Provider component to provide access to the Redux store through the connect API of react-redux, which we had discussed earlier.

store = configure-Store(); store. dispatch( load Contacts ());

// Render the Contacts React component by wrapping it in Provider

Updating index.html to include stylesheet

In the file index.html under the public folder, add the link to the bootstrap CSS for presentable UI and the stylesheet toastr.css to display UI status during add and delete actions.

<link rel="stylesheet" href="https://cdnjs.-cloudflare.com/ ajax/ libs/ twitter-bootstrap /3.3.7/ css/ bootstrap. min. css ">

<link rel="stylesheet" href="css/toastr.css"/>

Remove the generated files that are not needed

Remove the files App.js, App.css, App.test.js, index.css and logo.svg generated by create-react-app as we do not need them.

Running the application

1. Go to the Node.js command prompt. Change the directory to contacts.

2. Start the server.

start node server.js 3. Start the React application Contacts: npm start

This will start the application and display the Contacts information. We can now add and delete contacts.