Introduction to Redux

Role of Redux

The whole point with Redux is to have one single source of truth for your application state. The state is stored as a plain Javascript object in one place: the Redux Store. The state object is read-only. If you want to change the state, you need to emit an Action, which is a plain JavaScript object.

Your application can subscribe to get notified when the store has changed. When Redux is used with React, it is the React components that get notified when state changes and can re-render based on new content in the store.

Suppose, you need to pass data (state and props) between components that don't have any relationship. While making such communication between two components, it is difficult to pass data (state and props). In such cases, Redux is very useful because Redux eliminates the need to continuously pass state from one component to another.

When using Redux with React, states will no longer need to be lifted up. Everything is handled by Redux. Redux simplifies the app and makes it easier to maintain.

1. Redux offers a solution for storing all your application state in one place, called a store.
2. Components then dispatch state changes to the store, not directly to other components.
3. The components that need to be aware of state changes can subscribe to the store.
4. The store can be thought of as a "middleman" for all state changes in the application.
5. With Redux involved, components don't communicate directly with each other. Rather, all state changes must go through the single source of truth, the store.

You may also like: Redux: A Practical Tutorial.

Core Principal

Redux has three core principals:

1. Single source of truth.
2. State is read-only.
3. Changes are made with pure functions.

Single Source of Truth

The state of your whole application is stored in an object tree within a single store.

State Is Read-Only

The only way to change the state is to dispatch an action, an object describing what happened.

Changes Are Made With Pure Functions

To specify how the state tree is transformed by actions, you write pure reducers.

Redux Workflow

Redux allows you to manage the state of the application using Store. A child component can directly access the state from the Store.

The following are details of how Redux works:

1. When UI Event triggers (OnClick, OnChange, etc) it can dispatch Actions based on the event.
2. Reducers process Actions and return a new state as an Object.
3. The new state of the whole application goes into a single Store.
4. Components can easily subscribe to the Store.

Redux Core Concepts

Following are the main pillars of Redux:

1. Store.
2. Action.
3. Reducer.
4. Dispatch.
5. Subscribe.
6. Provider.
7. Connect.

Store

A Store is an object that holds the whole state tree of your application.

  import React from 'react'    
  import { render } from 'react-dom'    
  import { Provider } from 'react-redux'    
  import { createStore } from 'redux'    
  import rootReducer from './reducers'    
  import App from './components/App'    

  const store = createStore(rootReducer)    

 render(    
   <provider store="{store}">    
     <app>    
   </app></provider>,    
   document.getElementById('root')    
 )    

Action

Actions are plain JavaScript objects, and they must have a property to indicate the type of action to be carried out. They must also have a payload that contains the information that should be worked on by the action.

Actions are sent using store.dispatch() method.

1.action: {   
2.  type: [TYPE],   
3.  payload: [DATA]   
4.}  

Reducer

Reducers are pure functions that take the previous state of the app and return a new state based on the action passed to it.

 function(state, action) => newState 

Always remember that we should never mutate state inside the reducer; always return a new copy of the state. You can achieve this using:

1.  Object.assign() 
2.  Spread (…)  operator

Dispatch

 Dispatch is a method that triggers an action with type and payload to Reducer.

 store.dispatch() 

Subscribe

Subscribe is a method that is used to subscribe data/state from the Store.

 store.subscribe() 

Provider

The Provider is a component that has a reference to the Store and provides the data from the Store to the component it wraps.

Connect

Connect is a function that communicates with the Provider.

Benefits

Following are the benefits of using Redux:

1. Single source of truth.
2. Redux makes the state predictable.
3. Easy to Maintain.
4. No need to uplift the state in React.
5. Easy to Debug.

Further Reading

• Building a React-Based Chat Client With Redux, Part 2: React With Redux and Bindings.
• React, Redux and Saga: Connecting the Dots.
• How to Implement Data Polling With React, Redux, and Thunk.