Redux - Core Concepts


Let us assume our application’s state is described by a plain object called initialState which is as follows −

const initialState = {
   isLoading: false,
   items: [],
   hasError: false

Every piece of code in your application cannot change this state. To change the state, you need to dispatch an action.

What is an action?

An action is a plain object that describes the intention to cause change with a type property. It must have a type property which tells what type of action is being performed. The command for action is as follows −

return {
   type: 'ITEMS_REQUEST', //action type
   isLoading: true //payload information

Actions and states are held together by a function called Reducer. An action is dispatched with an intention to cause change. This change is performed by the reducer. Reducer is the only way to change states in Redux, making it more predictable, centralised and debuggable. A reducer function that handles the ‘ITEMS_REQUEST’ action is as follows −

const reducer = (state = initialState, action) => { //es6 arrow function
   switch (action.type) {
      case 'ITEMS_REQUEST':
         return Object.assign({}, state, {
            isLoading: action.isLoading
         return state;

Redux has a single store which holds the application state. If you want to split your code on the basis of data handling logic, you should start splitting your reducers instead of stores in Redux.

We will discuss how we can split reducers and combine it with store later in this tutorial.

Redux components are as follows −

Data Handling Logic


Useful Video Courses


React and Redux: Learn By Building Real World Projects

56 Lectures 12.5 hours

Eduonix Learning Solutions


React: Web Apps with ReactJS and Redux - The Complete Course

63 Lectures 9.5 hours



MERN Stack Full Ecommerce Site - Using React, Redux, Node.js

129 Lectures 19.5 hours

Ghulam Abbas


Complete Guide To Redux-Saga With React JS

31 Lectures 3 hours

Saumitra Vishal