Lesson 5 of 6By Simplilearn
Last updated on Feb 18, 20218660React is the most popular front-end JavaScript library available today. From startups to large corporations, more companies are adopting this widely used technology. Well-known brands like Netflix, Airbnb, and The New York Times are using it for their websites and their mobile applications.
Redux is a predictable state container for JavaScript apps. As an application grows, it becomes difficult to keep it organized and maintain data flow. That is where Redux comes to the rescue.
This React with Redux article will help you gain a working understanding of the basic concepts of this popular technology. For starters, we’ll get familiar with some of the basic Redux concepts. Once we’re done, we will create a simple React application with Redux, then an application without it. This exercise will clearly show the difference between the two implementations.
We will cover the following topics in this React With Redux tutorial:
Now before we get into the depths of understanding React with Redux, let us first understand why Redux!
Master the fundamentals of React including JSX, props, state, and events. Consider the React.js Certification Training Course. Enroll now!
State transfer between components is pretty messy in React since it is hard to keep track of which component the data is coming from. It becomes really complicated if users are working with a large number of states within an application.
Redux solves the state transfer problem by storing all of the states in a single place called a store. So, managing and transferring states becomes easier as all the states are stored in the same convenient store. Every component in the application can then directly access the required state from that store.
Redux is a predictable state container for JavaScript applications. It helps you write apps that behave consistently, run in different environments (client, server, and native), and are easy to test. Redux manages an application’s state with a single global object called Store.
![]() |
Redux is a state management tool |
![]() |
Redux can be used with any JavaScript framework or library |
![]() |
Redux stores the state of the application, and the components can access the state from a state store |
The three most important Redux principles are:
The state of your whole application is stored in an object tree within a single-store.
![]() |
|
The only way to change the state is to initiate an action, an object describing what happened.
![]() |
|
To specify how actions transform the state tree, you need to write pure reducers.
![]() |
|
These are Redux’s main pillars:
A store is an object that holds the application's state tree. There should only be a single store in a Redux app, as the composition happens at the reducer level.
getState() returns the current state of the store.
dispatch() dispatches an action. It is the only way to update the application state.
subscribe() subscribes a change listener to the state.
unsubscribe() is useful when you no longer want to call your listener method when the state changes.
An action is a plain object that represents an intention to change the state. They must have a property to indicate the type of action to be carried out.
Reducers are pure functions that specify how the application's state changes in response to actions sent to the store.
![]() |
There is always one source of truth, the store. Thus, there is no confusion about how to sync the current state with actions and other parts of the application. |
![]() |
The code is easier to maintain because it has a predictable outcome and strict structure. |
![]() |
Redux makes coding more consistent due to more stringent code organization procedures |
![]() |
It’s very useful, especially during the initial render, making for better user experience and search engine optimization. |
![]() |
Developers can track everything going on in the app in real-time—from actions to state changes |
![]() |
Since it has no encapsulation, any component can access data, which may potentially cause security issues |
![]() |
Some parts of the code are just boilerplate. However, these parts have to be incorporated with no alteration, and this restricts the design |
![]() |
As the state is immutable in Redux, the reducer updates the state by returning a new state every time which can cause excessive use of memory |
In this demo, we will create a web application in two ways:
The goal of this application is to display a subscribe button along with a message reading “Subscribe to Simplilearn.” Once the user clicks on the button, the message changes to “Thank you for subscribing.” So first let’s start by building the application without Redux. Later on, we will look into Redux implementation. As we work through both designs, note the differences.
1. Create a component called NewComp with the following code and export the component to the main component. The component NewComp.js reads the following code:
import React, { Component } from "react";
import { connect } from "react-redux";
class NewComp extends Component {
constructor(props) {
super(props);
this.state = {
message: "Subscribe to Simplilearn"
};
}
styles = {
fontStyle: "italic",
color: "purple"
};
Buttonchange = () => {
this.setState({
message: "Thank you for subscribing"
});
};
render() {
return (
<div className="App">
<h3 style={this.styles}>{this.state.message}</h3>
<button onClick={this.Buttonchange}>Subscribe</button>
</div>
);
}
}
2. Import the component NewComp into the main component App.js. The App.js main component reads the following code:
import React from "react";
import "./App.css";
import NewComp from "./Components/NewComp";
class App extends React.Component {
styles = {
fontStyle: "bold",
color: "teal"
};
render() {
return (
<div className="App">
<h1 style={this.styles}> Welcome </h1>
<NewComp />
</div>
);
}
}
export default App;
3. The application, when run, should like this:
1. Create a store in the index.js file
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducer from "./Store/Reducer";
const store = createStore(reducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
serviceWorker.unregister();
2. Create a component called NewComp.js with the following code:
import React, { Component } from "react";
import { connect } from "react-redux";
class NewComp extends Component {
styles = {
fontStyle: "italic",
color: "purple"
};
render() {
return (
<div className="App">
<h3 style={this.styles}>{this.props.message}</h3>
<button onClick={this.props.Buttonchange}>Subscribe</button>
</div>
);
}
}
const mapStatetoProps = state => {
return {
message: state.message
};
};
const mapDispatchToProps = dispatch => {
return {
Buttonchange: () => dispatch({ type: "Message_change" })
};
};
export default connect(
mapStatetoProps,
mapDispatchToProps
)(NewComp);
3. Create a folder called Store and a JavaScript file called Reducer.js within it with the following code:
const initialState = {
message: "Subscribe to Simplilearn"
};
const reducer = (state = initialState, action) => {
const newState = { ...state };
if (action.type === "Message_change")
newState.message = "Thank you for subscribing";
return newState;
};
export default reducer;
4. Finally, import the NewComp component in the main component App.js.
import React from "react";
import "./App.css";
import NewComp from "./Components/NewComp";
class App extends React.Component {
styles = {
fontStyle: "bold",
color: "teal"
};
render() {
return (
<div className="App">
<h1 style={this.styles}> Welcome </h1>
<NewComp />
</div>
);
}
}
export default App;
There’s practically no noticeable difference between the output of both implementations. The difference, however, is in how each implementation manages the states in the web application.
We have now created a React web application using both methods. React with Redux is more effective with larger React applications and should not be used for small or simple React web applications.
In case you have any questions related to this article, feel free to use our comments section and we will be more than happy to help.
For more in-depth training on this increasingly popular web and mobile application development framework, upskill in web and mobile software development with Simplilearn’s React.js Training Course. Through a combination of self-paced and instructor-led online training, you will learn everything you need to know to kickstart your career in React-based development!
Simplilearn is one of the world’s leading providers of online training for Digital Marketing, Cloud Computing, Project Management, Data Science, IT, Software Development, and many other emerging technologies.