What is the point of the constants in redux?

Question

For example from this example:

export const ADD_TODO = \'ADD_TODO\'
export const DELETE_TODO = \'DELETE_TODO\'
export const EDIT_TODO = \'EDIT_TODO\'
export          


        

Answer 1

You are right, it is not about saving characters however after code minification you can save some space.

In redux you use those constants at least in two places - in your reducers and during actions creation. So it's much convenient to define a constant once in some file e.g. actionTypes.js

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';

And then require it in actions creator file e.g. actions.js

import { ADD_TODO } from './actionTypes';

export function addTodo(text) {
  return { type: ADD_TODO, text };
}

And in some reducer

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
  }
};

It allows you to easily find all usages of that constant across the project (if you use an IDE). It also prevents you from introducing silly bugs caused by typos -- in which case, you will get a ReferenceError immediately.