What is Redux? Why use Redux with React for Front-End Web Development?

For beginners, Redux could be anything from a library to a state management tool. However, to simplify matters, we can say that Redux is a JavaScript framework for state management. So, what is state management? And what do they mean when one says React Redux together? Let’s begin from scratch.

A state is an object containing the original data along with its modifications. And managing the state or state management is keeping track of the entire process of changes in data as it is shared across different components of the application, a structure that tracks the data flow until its latest position.

Now that it is clear that Redux can maintain a complete data-flow architecture for apps, it is fair to say that Redux can be used with any frameworks meant for front-end web application development such as React JS, Angular JS, Angular, Ember, or Vue.

What is Redux in React context?

React JS is essentially a front-end web development toolkit that has a built-in function for the components to internally manage the state and thus dismissing the need to integrate with any external state management tool. However, React JS has a pretty straightforward data-flow architecture that limits the flow of data among different components of the application to a single direction. The more the number of components, the more complicated the data sharing/retrieval process becomes. Why is that?

Ideally, when the data has to be shared in React JS, a method is passed as props by the parent component to the sub-components to update the state information. And the state then lives in that sub-component. However, sharing the state among the siblings (sidewise) is not possible in React.

Therefore, it becomes imperative for the state to live at the app level to enable the downward flow of data.

But, here’s the catch.

During the process when the state travels downwards to the component/components that need the state, it passes through all those components which do not need that data and thereby making it less predictable due to inaccurate reasoning. Hence, the entire process of state management within React gets murkier and murkier.

This is where Redux steps in…

How does Redux work?

With bringing Redux into the picture, the issue of placing the data at the top component is resolved. The data can be a separate entity altogether with Redux and the required data can be pulled out with the code snippet specific to that component.

Well, that’s not all. In addition to keeping the app’s state (changes in data) in one place, Redux also enables tracking the changes and with proper reasoning, making it predictable as well. And this is the very reason why Redux is also referred to as a predictable state container.

The three musketeers of Redux

Redux handles the state management in apps in three important steps using the following set of functions – Actions, reducers, and store.

Actions:
The actions are those methods in Redux that essentially deposit the data collected from user interactions, form submissions, or API interfaces to the Redux store.

The store.dispatch() function is a JavaScript object associated with a type property. It could be any type of action - from login to search or anything about that component for which the data has to be stored in the container. Now, action creators are the functions that encapsulate the action object creation process and return action objects.

const setLoginStatus = (name, password) => {
return {
type: "LOGIN",
payload: {
username: "codetru",
password: "redux"
}
}
}

Reducers:
Reducers are intermediary methods that consider the current state of the application, perform an action on it, and then create a new state. The job of the reducers is carried out via the reducer() function in JavaScript which goes on to return objects with each action performed on the store.

const LoginComp = (state = initState, action) => {
switch (action.type) {
// This reducer handles all actions with type "LOGIN"
case "LOGIN":
return state.map(user => {
if (user.username !== action.username) {
return user;
}
if (user.password == action.password) {
return {
user,
login_status: "LOGGED IN SUCCESSFULLY"
}
}
});
default:
return state;
}
};

Store:
The store methods like createStore() essentially store the state of the application. There is a single store for a Redux application which is accessible by all the components of the app. For every action triggered in Redux, a new state is created, and the same state is carried forward to store, update, and delete data through helper methods at various stages. This streamlined data flow in Redux makes the state more traceable and predictable.

const store = createStore(LoginComp);
class MyApp extends React.Component {
render() {
return (
< div>
< Status user={this.props.user.name}/>
< Login login={this.props.setLoginStatus}/>
< /div>
)
}
}

Advantage of using React Redux

As explained in the earlier sections, with Redux, the states need not be lifted above to reside on the top. Also, the parent component needn’t contain the method to update the status of the data as it passes down to the child component with the entire job handled by Redux. While simply managing the app’s state is the primary objective of Redux, there are many more advantages of using Redux in React which we will see in the next blog along with its drawbacks.














Thank You for Your Interest. Our Team Will Contact You as soon as Possible.





Get in Touch with Us






 

Contact us or schedule a meeting with our experts now.

codetru








Thanks for signing up with Codetru.


Copyright © 2021. All rights reserved.