Open In App

Introduction to Redux (Action, Reducers and Store)

Last Updated : 01 Oct, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

Redux is a state managing library used in JavaScript apps. It simply manages the state of your application or in other words, it is used to manage the data of the application. It is used with a library like React.
Uses: It makes easier to manage state and data. As the complexity of our application increases. At the start, it is hard to understand but it really helps to build complex applications. In starting, it feels like a lot of work, but it is really helpful.
Before we dive into Redux we should know about some important principles of redux. There are three principles of Redux these are: 
 

  • Single source of truth: It helps to create universal apps. The state of the application is stored in one object tree called store. It means one app, one store.
  • State is read-only (Immutability): It means that we don’t change the state object and its properties directly. Instead of this make a new object, recalculate the new application state and update it with our newly created object. And this is important because all the changes are happening in the same place so everything is needed to be done in strict order and one by one.
  • Changes are made with pure functions (reducers): Reducers are pure functions that take previous state and action (discuss later) and return the new state.

Building Parts of redux: 
 

  1. Action
  2. Reducer
  3. Store

 

Redux data flow

Actions: Actions are a plain JavaScript object that contains information. Actions are the only source of information for the store. Actions have a type field that tells what kind of action to perform and all other fields contain information or data. And there is one other term called Action Creators, these are the function that creates actions. So actions are the information (Objects) and action creator are functions that return these actions.
Example: The easiest example we can take try is To-do. So we will create two action creators one for adding a task in to-do and for removing.
 

javascript




function addTask(task) {
   
  return {
     
    type: 'ADD_TODO',
    task: task
  }
}
 
function removeTask(task) {
  
  return {
    type: 'REMOVE_TODO',
    task: task
  }
}


So, the above two functions are action creators. One is for adding a task and one for removing, and see both have a type which tells what is the purpose of actions creator and they will be used with reducers.
Reducers: As we already know, actions only tell what to do, but they don’t tell how to do, so reducers are the pure functions that take the current state and action and return the new state and tell the store how to do.
Let’s create a reducer for our TO-do. 
Example: 
 

javascript




function task(tasks = [], action) {
   
  if (action.type === 'ADD_TODO') {
    return [...tasks, action.task];
  } else if (action.type === 'REMOVE_TODO') {
      return tasks.filter(task => task !== action.task);
    }
  return tasks;
}


So, In the above reducer, a function created with two arguments first is the current state and next is the action we want to perform, First initialize the current state empty array because at first task list is gonna be empty. 
Then check the action type, different type of actions will have different functionality, In the above case if task is added, then it returns the array containing older list of task and with one new added, but the older state are not gonna mutate the older state we gonna return new one, this is needed to be kept in mind. Same for remove, if none of the above two then just return the list. Return the new state, Never mutate the older state. 
For more complex apps use combineReducers() to combine them so that it can pass to store.
Store: The store is the object which holds the state of the application.
Functions associated with Store: 
 

  • createStore() – To create a store
  • dispatch(action) -To change the state
  • getState() – for getting current state of store.

Example: Let’s create a store for our TO-do. 
 

javascript




import { createStore } from 'Redux';
 
// Creating store
const store = createStore(taskList);
 
// Here add is action as you can see console,
// its an object with some info
const add = addTask('Wake up');
console.log(add);
 
// Dispatch usually trigger reducer and perform task
store.dispatch(add);
 
// getState() function is used to get current state
console.log(store.getState());
 
store.dispatch(addTask('Study'));
store.dispatch(addTask('Eat'));
store.dispatch(addTask('Go to sleep'));
store.dispatch(removeTask('Eat'));
store.dispatch(addTask('Work'));
store.dispatch(addTask('Sleep'));
store.dispatch(removeTask('Sleep'));
 
console.log(store.getState());




Previous Article
Next Article

Similar Reads

Redux Reducers
Reducers in Redux are pure function that determines changes to an application’s state. Reducer is one of the building blocks of Redux.  Table of Content What are Reducers in Redux ?Pure functionRedux Reducer Working ExampleWhat are Reducers in Redux ?In Redux, reducers are pure functions that handle state logic, accepting the initial state and acti
4 min read
How to handle Immutable State in Redux Reducers?
Managing immutable states in reducers is a core principle of Redux that is used for maintaining the predictability and consistency of the application's state throughout its lifespan. Immutable state denotes that once a state object is created, it cannot undergo direct modification. If there are any alterations to the state trigger, then there will
4 min read
How to Call an Action From Within Another Action in VueJS ?
In Vue.JS applications, we can call one action from within another as per the requirement for managing complex workflows. In this article, we will see the two different approaches with their practical implementation, through which we can perform this calling action. Table of Content Using MethodsUsing Event BusApproach 1: Using MethodsIn this appro
3 min read
How to Call an Action From Within Another Action in Vuex ?
Vuex is a state management library for Vue applications. As we know passing props can be tedious for complex applications with many components, Vuex makes this interaction very seamless and scalable. In Vuex, actions are functions that perform asynchronous operations and commit mutations to modify the state. In this article, we will learn How to ca
4 min read
How to combine multiple reducers in ReactJS ?
To combine multiple reducers in React JS we have a function called combineReducers in the redux. This basically helps to combine multiple reducers into a single unit and use them. Approach In React, to combine and implement multiple reducers combineReducers methods are used. It manages multiple reductions and uses them with the defined actions in t
4 min read
In what scenarios might you choose Redux Thunk over Redux Saga, and vice versa?
Redux, a predictable state container utilized in JavaScript applications, is extensively employed in React applications to manage application state. Middleware libraries like Redux Thunk and Redux Saga are commonly integrated with Redux to handle side effects such as asynchronous API calls and intricate state transitions. While both offer solutions
4 min read
Explain Action’s in Redux
In this article, we are going to learn about Action in Redux. Actions are plain JavaScript object that contains information. Action is one of the building blocks of Redux. Redux is a state managing library used in JavaScript apps. It is used to manage the data and the state of the application. Uses of Redux: With the help of redux it is easy to man
5 min read
How to handle more action using redux ?
In Redux, actions are the JavaScript object which has information. Having multiple actions will need multiple action creators. These actions should be unique in redux. Especially, the type of action must be defined properly to identify that. We will take the example of to-do list actions. There are actions we will define and handle: Add todo itemDe
4 min read
What are Action's creators in React Redux?
In React Redux, action creators are functions that create and return action objects. An action object is a plain JavaScript object that describes a change that should be made to the application's state. Action creators help organize and centralize the logic for creating these action objects. Action Creators:Messengers with a Purpose: Action creator
4 min read
Action's Payload in React Redux
In the realm of React Redux, understanding how actions and their payloads work is fundamental to efficient state management. Actions serve as messengers that convey information from your application to the Redux store, triggering state updates. Among the key components of actions is the payload, which carries data to be processed by reducers. This
6 min read
Article Tags :