{"id":101844,"date":"2020-02-12T16:00:36","date_gmt":"2020-02-12T14:00:36","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=101844"},"modified":"2020-02-11T19:37:49","modified_gmt":"2020-02-11T17:37:49","slug":"reactjs-and-redux-tutorial","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/reactjs-and-redux-tutorial.html","title":{"rendered":"ReactJS and Redux Tutorial"},"content":{"rendered":"
In this post, we look at using the Redux library with ReactJS. Redux, in a gist, centralizes state management. It provides APIs and patterns to manipulate the state in a predictable way. This leads to consistent application behavior. Wherein for the same set of changes we get the same resultant state every time, the change is predictable. <\/p>\n
As we work through this article we build a simple ReactJS application to take a ride through the Redux world. It seems intimidating at first but by the time we are done, you will have a better understanding of its benefits and an appreciation of the motivation behind it. Let us get started with some basic concepts first.<\/p>\n
1. Basic Concepts<\/h2>\n
Before we begin creating our sample application, let us go over some terms and their definitions first. Some of the key players in the Redux Universe are as follows:<\/p>\n
Actions<\/em><\/span><\/p>\n
You can think of actions as JavaScript Object representing actions that trigger a change in the state of the application. We call or rather dispatch actions in response to an event that may or may not be the result of user action. The only rule with action objects is that they have a “type” property. Other than that the structure of the action object is up to us.<\/p>\n
Reducers<\/em><\/span><\/p>\n
Reducers are JavaScript functions that actually change state in response to actions. These are basically pure functions, in that they do not change the data passed into them, rather they use it to create a new state.<\/p>\n
Store<\/em><\/span><\/p>\n
This is a plain JavaScript object which holds the state of the entire application. Changes to the data stored in this object results in the re-rendering of the view. Remember its data is changed by reducers which in turn act when actions are triggered by our code. <\/p>\n
2. Basic Application Structure<\/h2>\n
Let us create a basic application structure and pull down all the npm packages we will need. To start off we use the create-react-app package to generate a basic ReactJS application like below:<\/p>\n
>npx create-react-app my-app .<\/pre>\n
This generates a skeletal ReactJS app named my-app in the current folder.<\/p>\n
Next, since we will be working with Redux we install a few dependencies related to it among others.<\/p>\n
Now we are ready to build our ReactJS Redux application.<\/p>\n
3. ReactJS and Redux – Sample Application<\/h2>\n
We build a simple application that shows matching country names as the user types in a text box. The country names are fetched from a server API and populated in an unordered list below the text box. Our state will store the text typed in by the user and a list of matching country names fetched from the API. The shape of our state looks like below:<\/p>\n
We use Nodejs and Express to quickly set up a server-side API. The API returns a list of countries matching the text supplied to it. The code for our server-side API looks like below:<\/p>\n
index.js<\/em><\/span><\/p>\n
const express = require('express');\nconst app = express();\nconst bodyParser = require(\"body-parser\");\nconst api = require('.\/countryController');\nconst cors = require('cors');\n\napp.use(bodyParser.json());\napp.use(bodyParser.urlencoded({ extended: true }));\napp.use(cors());\napp.use('\/api', api());\n\nconst Port = process.env.PORT || 2019;\n\napp.listen(Port, () => {\n console.log(`Listening on ${Port}.`);\n});\n<\/pre>\n
Redux does require a bit of verbose boilerplate code to get up and running. But don’t let this discourage you. Once you understand what each piece does it will not seem too daunting afterward.
<\/div> <\/div><\/p>\n
First let us set up our actions, remember, these are JavaScript objects with a mandatory type property. We will create three files for this, namely, actionTypes.js, countryActions.js, and userActions.js. actionTypes.js stores string constants with names of our actions. The other two files contain what are called action creators. Action creators are basically JavaScript functions that return action objects. <\/p>\n
import { FETCH_COUNTRIES_BEGIN, \n FETCH_COUNTRIES_FAILED, \n FETCH_COUNTRIES_SUCCESS } from '.\/actionTypes';\n\nexport function fetch_countries(result) {\n return function (dispatch) {\n dispatch(fetch_countries_begin(result))\n\n return window.fetch(`http:\/\/localhost:2019\/api\/country\/${result}`)\n .then(response =>\n response.json(),\n (error) => {\n dispatch(fetch_countries_error(error));\n }\n ).then((res) => dispatch(fetch_countries_success(res)));\n }\n}\n\nexport function fetch_countries_success(result) {\n return { type: FETCH_COUNTRIES_SUCCESS, result };\n}\n\nexport function fetch_countries_error(result) {\n return { type: FETCH_COUNTRIES_FAILED, result };\n}\n\nexport function fetch_countries_begin(result) {\n return { type: FETCH_COUNTRIES_BEGIN, result };\n}\n<\/pre>\n
userActions.js<\/em><\/span><\/p>\n
import { USER_TEXT } from '.\/actionTypes';\n\nexport function user_text(result) {\n return { type: USER_TEXT, result };\n}\n<\/pre>\n
Now that our actions are setup let us set up our reducers next. Reducers are pure functions that take the previous state and action object as parameters and return a new state object. Simple enough, we create two separate reducers, one each to handle the user input and the list of countries from the API. But there is catch here since a reducer synchronously returns a state object how do we handle API calls or rather async operations.<\/p>\n
The standard way to do this is by using Redux-thunk. This store enhancing middleware allows reducers to return functions or promises. We will enhance our store later with the thunk middleware, but for now, we will assume it to be. Our reducers look like below:<\/p>\n
countryReducer.js<\/em><\/span><\/p>\n
import * as type from \"..\/actions\/actionTypes\";\nimport initialState from \".\/initialState\";\n\nexport default function country(state = initialState.country, action) {\n switch (action.type) {\n case type.FETCH_COUNTRIES_SUCCESS:\n return { ...state, countries: action.result, isLoading: false, error: null };\n case type.FETCH_COUNTRIES_FAILED:\n return { ...state, countries: [], isLoading: false, error: action.result };\n case type.FETCH_COUNTRIES_BEGIN:\n return { ...state, countries: [], isLoading: true, error: null };\n default:\n return state;\n }\n}\n<\/pre>\n
userTextReducer.js<\/em><\/span><\/p>\n
import * as type from \"..\/actions\/actionTypes\";\nimport initialState from \".\/initialState\";\n\nexport default function user(state = initialState.user, action) {\n switch (action.type) {\n case type.USER_TEXT:\n return { ...state, text: action.result };\n default:\n return state;\n }\n}\n<\/pre>\n
index.js<\/em><\/span><\/p>\n
import { combineReducers } from \"redux\";\nimport country from '.\/countryReducer';\nimport user from '.\/userReducer';\n\nconst rootReducer = combineReducers({\n country,\n user\n});\nexport default rootReducer;\n<\/pre>\n
Finally, it is time to set up our store. In Redux there is just one central store that stores all of our application’s state. The code looks like below:<\/p>\n
configureStore.js<\/em><\/span><\/p>\n
import { createStore, applyMiddleware, compose } from \"redux\";\nimport rootReducer from \".\/reducers\";\nimport reduxImmutableStateInvariant \n from \"redux-immutable-state-invariant\";\nimport thunkMiddleware from \"redux-thunk\";\n\nexport default function configureStore(initialState) {\n const composeEnhancers =\n window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; \n \/\/ add support for Redux dev tools\n\n return createStore(\n rootReducer,\n initialState,\n composeEnhancers(applyMiddleware(reduxImmutableStateInvariant(), thunkMiddleware))\n );\n}\n<\/pre>\n
Now that we are done setting up Redux, let us move forward and work on our UI.<\/p>\n
4. Building UI Components<\/h2>\n
First, we will build our presentational components, viz., Input & CountryList. The Input component renders a simple input tag for the user to type country names into. The code for this component looks like below:<\/p>\n
Input.js<\/em><\/span><\/p>\n
import React from 'react';\n\nexport default function Input(props) {\n const handleChange = (event) => {\n props.user_text(event.target.value);\n props.fetch_countries(event.target.value);\n }\n return <input type=\"text\" \n style={{ margin: \"15px\", width: \"225px\" }}\n placeholder=\"Type Country Name or Code\" \n onChange={handleChange}\n value={props.text} \/>;\n}\n<\/pre>\n
Next, we build a component to show the list of countries from the API. Nothing fancy here just rendering an unordered list of country names. The code for this component looks like below:<\/p>\n
Now let us build our Container Component to present the UI to the user. We call it HomePage.js, an important piece here is connecting this component to Redux using the connect method. It takes two arguments matchStateToProps and matchDispatchToProps. What the two do is to wire up the state of the application to props and actions to props. We then pass these down to presentational components to complete the example. The code for this HomePage component looks like below:<\/p>\n
HomePage.js<\/em><\/span><\/p>\n
import React from 'react';\nimport Input from '..\/Common\/Input';\nimport CountryList from '..\/Common\/CountryList';\nimport * as countryActions from '..\/..\/Redux\/actions\/countryActions';\nimport * as userActions from '..\/..\/Redux\/actions\/userActions';\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from \"redux\";\n\nfunction HomePage(props) {\n return <><Input \n user_text={props.actions.user_text}\n fetch_countries={props.actions.fetch_countries}>\n <\/Input>\n <CountryList \n countries={props.country.countries}>\n <\/CountryList>\n <\/>;\n}\nconst matchStateToProps = (state) => {\n return {\n country: state.country,\n text: state.text\n }\n}\nconst matchDispatchToProps = (dispatch) => {\n return {\n actions: {\n fetch_countries: bindActionCreators(countryActions.fetch_countries, dispatch),\n fetch_countries_begin: \nbindActionCreators(countryActions.fetch_countries_begin, dispatch),\n fetch_countries_success: \nbindActionCreators(countryActions.fetch_countries_success, dispatch),\n fetch_countries_error: \nbindActionCreators(countryActions.fetch_countries_error, dispatch),\n user_text: \nbindActionCreators(userActions.user_text, dispatch)\n }\n }\n}\n\nexport default \nconnect(matchStateToProps, matchDispatchToProps)(HomePage);\n<\/pre>\n
We are now done with the code part of our application. In the next section, we look at how to run and see the application in action.<\/p>\n
5. Running the Application<\/h2>\n
We need to make some changes to our start command in the package.json. The changes ensure both the server-side API and the client code are launched in parallel. There are utilities available out there to do this, but for this example, I just used the start command instead. Let us modify the start command to look like below:<\/p>\n
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/ScreenGrabReactJSReduxApp.jpg\")