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

Not related to redux but a useful tip for all react developers.

Consider this example:

render() {
    return (
        veryBigArray.map((item) => {
            return (
                <li key={ index }>
                    { item.value || "Missing Value" }
                </li>
            );
        });
    );
}

Question: Why should I extract 'Missing value' to a constant?

Answer: Javascript is basically calling new String('Missing value') thus creating a new object for each item in the array and for each render() execution. This is both unnecessary and depending on the array size can impact performance

Answer 2

This is more useful in other languages, but also somewhat useful in JavaScript. For instance, if I used "ADD_TODO" throughout the code, instead of ADD_TODO, then if I make a mistake typing any of the strings, if it was code like, if (action === 'ADD_TODOz'), when that code executes, it will do the wrong thing. But if you mistyped the name of the const, if (action === ADD_TODOz), you'll get som kind of a ReferenceError: ADD_TODOz is not defined when that line attempts to execute -- because ADD_TODOz is an invalid reference. And, of course, in a static language, you'll get an error at "compile time."

Answer 3

I would like to quote @dan_abramov, the author of Redux from a comment on similar Github issue.

Why is this beneficial? It is often claimed that constants are unnecessary, and for small projects, this might be correct. For larger projects, there are some benefits to defining action types as constants:

• It helps keep the naming consistent because all action types are gathered in a single place.

• Sometimes you want to see all existing actions before working on a new feature. It may be that the action you need was already added by somebody on the team, but you didn’t know.

• The list of action types that were added, removed, and changed in a Pull Request helps everyone on the team keep track of scope and implementation of new features.

• If you make a typo when importing an action constant, you will get undefined. This is much easier to notice than a typo when you wonder why nothing happens when the action is dispatched.

Here's the link to the Github issue

Answer 4

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.