The ones familiar with react will know that react is a component-based front end library tool that connects the various segments of the web page. In react, we use props (short for properties) in a component which allows the usage of non-static variables. With the help of props, we can pass these variables into various other components (child components) from the parent component.
Example: Passing props from parent component to child component:
Javascript
import React, { Component } from 'react';class App extends Component { render() { const wishes = 'Welcome to My World'; return ( <div> <Greeting wishes={wishes} /> </div> ); }}class Greeting extends Component { render() { return <h1>Welcome to {this.props.wishes} world!!</h1>; }}export default App; |
The presence of the state in react allows defining its own variables of a component. With a few components in our application, we can pass these states as props to the child components. But as the count of components increases in the application in accordance with its large objective, we need to pass these state to other components located far away from each other in the component tree. At this moment, the usual way of transferring state as props turns out to be complex as not every component is a parent to the component requiring the state.
Example: Initializing state in a component and passing it as props to its child component:
Javascript
class Parent extends Component{ constructor(props){ super(props); this.state={ child1=0; child2=1; }; } render() { return ( <Child1 value={this.state.child1} /> <Child2 value={this.state.child2} /> ); }} |
This brings the need for react-redux in our react application. React-redux being a state management tool makes it easier to pass these states from one component to another irrespective of their position in the component tree and hence prevents the complexity of the application.
Working Procedure: When a react application holds various components in need of state from other components it becomes difficult to realize where the state should reside among these components to make it easier to maintain. React-redux provides a store which makes the state inside components easier to maintain. Along with stores, react-redux introduces actions and reducers which work simultaneously with stores to make the state more predictable. The working of the features in react-redux is explained below:
- Store: It contains the state of the components which need to be passed to other components. The store makes this passing along much easier as we no longer need to maintain a state inside a parent component in order to pass the same to its children components.
- Actions:The actions part of the react-redux basically contains the different actions that are to be performed on the state present in the store.The actions included must contain the type of the action and can also contain payload(data field in the actions).
Example: Actions of increment and decrements in a react app:
Javascript
export const increment = (num) => { return{ type: 'INCREMENT', payload: num };};export const decrement = () => { return{ type: 'DECREMENT', };}; |
- Reducers: The reducers in react-redux are the pure functions that contain the operations that need to be performed on the state. These functions accept the initial state of the state being used and the action type. It updates the state and responds with the new state. This updated state is sent back to the view components of the react to make the necessary changes. A reducer must contain the action type.
Example: Reducer which updates the state in accordance with the action type 1st program and the 2nd program shows the snippet of creating the store which accepts the reducer.
Program:1
Javascript
const counterReducer = (state=0, action) => { switch(action.type) { case 'INCREMENT': return state + action.payload; case 'DECREMENT': return state - 1; default: return state; }}; |
- Program:2
Javascript
import {createStore} from 'react-redux';const store = createStore( counterReducer, window.__REDUX__DEVTOOLS__EXTENSIONS__ && window.__REDUX__DEVTOOLS__EXTENSION__()); |
React-Redux needed for: As shown above, it is clearly noticeable that the usage of react-redux introduces a lot of boilerplate code in our application only for the purpose of passing the state from one component to the other. This may lead many new learners of react-redux to withdraw their interest from the same. Regardless of this fact many developers prefer react-redux in their application due to the following reasons:
- Reduces code complexity: As discussed earlier, when an application holds a large number of components interacting with each other through their state it becomes difficult to manage the passing of state of a component as props to another component located far in the component tree. React-redux with the introduction of the store holds the state of the application’s components and hence makes the code simpler as it removes the confusion of where the state should have resided.
- Easier Maintainability: With the help of the store, the state is now located at one position in the application which makes it easier to maintain whenever an update in the state takes place in various components.
- Reduces Time: React-redux refreshes the parts of a page rather than reloading the whole page and therefore saves us time.
- Effortless Debugging: React-redux introduces reducers which are pure functions operating on the state which makes the logic simpler and helps in achieving effortless debugging.
Installing: To install react-redux in your react app, run the below command in the terminal:
npm install react-redux
Reference: https://react-redux.js.org/
