react js-tutorial

React Redux

In order to create JavaScript applications that work reliably in client, server, and native environments and are simple to test, Redux is a predictable state container.

You can use it with any other JavaScript framework or library, albeit React is where it’s primarily utilised as a state management tool. You don’t need to be concerned about it increasing the asset size of your application because it is little at 2KB (including dependencies).

Redux allows you to keep your application’s state in a store, where any component can access any state that it requires.

When to Use Redux

Redux has recently been the subject of one of the greatest discussions in the frontend community. Redux quickly became one of the most hotly debated subjects after its release. While some praised it, others criticised it.

Redux enables you to control the state of your app from a single location, making updates more predictable and traceable. It makes it simpler to analyse changes that take place in your app. But each of these advantages has trade-offs and limitations. Although that relies on the design choices, one can feel that it accumulates boilerplate code and makes routine tasks feel a little burdensome.

You will be able to tell when Redux is necessary, is one straightforward response to this query. If you’re still not sure if you require it, you don’t. This typically occurs when your app scales to the point where maintaining app state becomes difficult, and you begin looking for ways to make it simple and easy.

What does Redux’s state management entail?

In essence, state management is a method for facilitating data transfer and communication across components. It generates a concrete data structure that you can read from and write to to represent the state of your programme. By doing this, you can interact with states that would otherwise be invisible.

The majority of libraries, like React, Angular, etc., are designed with a means for components to maintain their state internally without using an additional library or tool. When an application has a small number of components, it works well, but as the programme gets larger, handling the states that are shared across components becomes difficult.

Knowing where a state should truly reside in an app where data is shared throughout components may be difficult. Since a component’s data should ideally only reside in that component, transferring data amongst siblings becomes challenging.

A state must reside in the parent component in React, for example, in order for siblings to share data. The parent component provides a method for modifying this state and passes it as a prop to these siblings components.

Here’s a basic React login component example. The status component’s presentation is influenced by the input made to the login component, which is one of its siblings:

Example

Here is a small example of react and Redux application. You can also try developing small apps. Sample code for increase or decrease counter is given below −

This is the root file which is responsible for the creation of store and rendering our react app component.

/src/index.js

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux';
import reducer from '../src/reducer/index'
import App from '../src/App'
import './index.css';

const store = createStore(
   reducer,
   window.__REDUX_DEVTOOLS_EXTENSION__ && 
   window.__REDUX_DEVTOOLS_EXTENSION__()
)
render(
   <Provider store = {store}>
      <App />
   </Provider>, document.getElementById('root')
)

This is our root component of react. It is responsible for rendering counter container component as a child.

/src/app.js

import React, { Component } from 'react';
import './App.css';
import Counter from '../src/container/appContainer';

class App extends Component {
   render() {
      return (
         <div className = "App">
            <header className = "App-header">
               <Counter/>
            </header>
         </div>
      );
   }
}
export default App;

The following is the container component which is responsible for providing Redux’s state to react component −

/container/counterContainer.js

import { connect } from 'react-redux'
import Counter from '../component/counter'
import { increment, decrement, reset } from '../actions';

const mapStateToProps = (state) => {
   return {
      counter: state
   };
};
const mapDispatchToProps = (dispatch) => {
   return {
      increment: () => dispatch(increment()),
      decrement: () => dispatch(decrement()),
      reset: () => dispatch(reset())
   };
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Given below is the react component responsible for view part −

/component/counter.js

import React, { Component } from 'react';
class Counter extends Component {
   render() {
      const {counter,increment,decrement,reset} = this.props;
      return (
         <div className = "App">
            <div>{counter}</div>
            <div>
               <button onClick = {increment}>INCREMENT BY 1</button>
            </div>
            <div>
               <button onClick = {decrement}>DECREMENT BY 1</button>
            </div>
            <button onClick = {reset}>RESET</button>
         </div>
      );
   }
}
export default Counter;

The following are the action creators responsible for creating an action −

/actions/index.js

export function increment() {
   return {
      type: 'INCREMENT'
   }
}
export function decrement() {
   return {
      type: 'DECREMENT'
   }
}
export function reset() {
   return { type: 'RESET' }
}

Below, we have shown line of code for reducer file which is responsible for updating the state in Redux.

reducer/index.js

const reducer = (state = 0, action) => {
   switch (action.type) {
      case 'INCREMENT': return state + 1
      case 'DECREMENT': return state - 1
      case 'RESET' : return 0 default: return state
   }
}
export default reducer;

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.