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?

@charlietfl but there's no reason to even change the name. When or why will ADD_TODO ever be changed? — m0meni, Jan 23 '16 at 16:41
and if the name and changed, it's probably not too good to leave constant's name different from the string stored in it anyway. — Evgenia Karunus, Jun 05 '16 at 12:21
not a direct answer to your question, but you can cut down on a tremendous amount of boilerplate with [redux-define](https://github.com/smeijer/redux-define) — Mr5o1, Jan 04 '18 at 00:00

score 71 · Accepted Answer · edited Jun 20 '20 at 09:12

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

score 70 · Answer 2 · edited May 25 '17 at 13:29

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.

<3 thank you! This is a great explanation. One suggestion, mention/summarize the final bit about debugging and `ReferenceError` at the beginning to get the point across right away. — Riveascore, Jul 17 '16 at 03:53
I get the idea, but I feel it's such a cumbersome thing to do, I never really bothered to do it because I think it's too much boilerplate. — Vlady Veselinov, Nov 08 '16 at 23:48

score 7 · Answer 3 · answered Jul 04 '16 at 21:51

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."

What is the point of the constants in redux?

3 Answers3

Linked