javascript - 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 const COMPLETE_TODO = 'COMPLETE_TODO'
export const COMPLETE_ALL = 'COMPLETE_ALL'
export const CLEAR_COMPLETED = 'CLEAR_COMPLETED'

It's not like you're saving characters. The variable name is exactly the same as the string, and will never change. I understand making constants if one day you were doing to do something like:

ADD_TODO = 'CREATE_TODO'

but that never happens. So what purpose do these constants serve?

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.