What is the purpose of the constants in Redux?

Technology CommunityCategory: ReduxWhat is the purpose of the constants in Redux?
VietMX Staff asked 3 years ago

Constants allow you to easily find all usages of that specific functionality across the project when you use an IDE. It also prevents you from introducing silly bugs caused by typos — in which case, you will get a ReferenceError immediately.

Normally we will save them in a single file (constants.js or actionTypes.js) For example:

export const ADD_TODO = 'ADD_TODO';
export const DELETE_TODO = 'DELETE_TODO';
export const EDIT_TODO = 'EDIT_TODO';
export const COMPLETE_TODO = 'COMPLETE_TODO';
export const COMPLETE_ALL = 'COMPLETE_ALL';
export const CLEAR_COMPLETED = 'CLEAR_COMPLETED';

In redux you use them in two places 1. During actions creation Let’s take actions.js

import { ADD_TODO } from './actionTypes';

export function addTodo(text) {
  return { type: ADD_TODO, text };
}
  1. Reducers Let’s create reducer.js
import { ADD_TODO } from './actionTypes';

export default (state = [], action) => {
  switch (action.type) {
    case ADD_TODO:
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ];
    default:
      return state
  }
};