React Redux

React is a front-end library based on components connecting various segments of a web page. As we know, React is not the complete framework but just the view part of the Model-View-Controller(MVC) framework. In order to enable the usage of non-static variables, we use props (properties) in a component. We can pass these variables to various other components from the parent component with the help of props.

Introduction to React-Redux:-

Redux is a state management tool with a predictable state container designed to write JavaScript apps that behave consistently across client, server, and native environments and are easy to test. As it’s lightweight at 2KB (including dependencies), it reduces the worry of making our application’s size bigger.

With Redux, the state of our application is kept in a store, and the component can access this store for any state that it needs.

When to use Redux?

Redux has been one of the hottest topics of discussion in the frontend world. It was favored by many while others pointed out issues.

It allows us to manage our app’s state in a single place and keep changes more predictable and traceable. React makes it easier to reason about changes occurring in our app. As we know about the benefits of redux one might debate on the tradeoffs and constraints we get. One might feel it increases the boilerplate code, making simple things a little overwhelming; but all this depends on the architectural decisions.

Important concepts in Redux:

Here are the concepts in Redux, mentioned below, that is important for it to work:

  • Initial states
  • Actions
  • Reducers
  • Store

Initial States

The starting state of our application is known as the Initial state. For example, When we refresh our app, all the changes are reverted back to the initial state as Redux loses all updated states.

Actions

Actions can be defined as events. Action is nothing but an object. An action must at least contain a type.

{
  type: "CHANGE_BUTTON_COLOR",
  color: "red"
}

On click, when a button requests "CHANGE_BUTTON_COLOR". We call it dispatching an action.

Reducers

Reducer is a translator which helps the command center to understand the requests. Technically, the reducer also performs an action.

Let's say our reducer understands two actions: "ADD_NOTE" and "DELETE_NOTE". Our reducer would  look like this (the switch case usage is normal):

switch(action.type){
    case ADD_NOTE:
      return [...state, action.note]

    case DELETE_NOTE:
      // return logic to delete note

    default:
      return state;
  }

The action might look like this:

{
  type: "ADD_NOTE",
  note: "This is my awesome note!",
}

Our reducer then checks the type (action.type) and on finding a match ("ADD_NOTE"). It returns a state which is updated: [...state, action.note] (previous state plus the newest note)

If we send a reducer "UPDATE_NOTE" action, it would not know what to do. It will simply default state (default). We can add as many different case scenarios as we want here.

In short, a reducer works on a set of instructions. On receiving an action, it looks for a matching type. As it finds the desired match, it follows whatever instruction is set and returns the modified state. Keeping in mind that the state is immutable, we are not changing the state's array. Here, we are trying to return a new array of notes consisting of the old notes plus the new note.

Note: Do not mutate the actual states. Return a copy of old states plus new states(Updated state).

Store

The store is where the states are being stored. It is always recommended to keep only one store in any Redux application. The stored state can be accessed, update the state, and register/unregister listeners via helper methods.

A store might look something like this:

{
  buttonText: 'Submit',
  buttonColor: 'blue',
  isHidden: false,
  awesomeNotes: [
    {title: 'awsome!', id: 1},
    {title: 'awesomer!', id: 2}
  ]
  ...
}

Conclusion:-

As we have seen above, we should be using react with redux because it solves the state management problem. Redux offers a solution by storing your whole application state in a single place which can be called its central store and is accessible to each component.

Parv Saxena

Parv Saxena