JS Built-ins
← redux-legacy10 / 22
redux-legacyaction-creatorbeginner

Action Type Constants

📖 Usage Example
const ADD_TODO = 'ADD_TODO'

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

// Typo-safe: ADD_TODOO would throw ReferenceError

Constants make action types refactor-safe and provide a single source of truth for each string value.

Action Type Constants

Defining action type strings as named constants eliminates typos and enables autocomplete:

const ADD_TODO = 'ADD_TODO'
const REMOVE_TODO = 'REMOVE_TODO'

If you mistype a constant name, JavaScript throws a ReferenceError. If you mistype a raw string, the action silently fails.

Challenge: Define string constants ADD_TODO, REMOVE_TODO, and TOGGLE_TODO, then implement addTodo(text) that returns { type: ADD_TODO, payload: text }.

💡 Hints (2)
  • • Constants are typically placed at the top of a file or in a dedicated `actionTypes.js` file.
  • • Using constants in both the action creator and the reducer means a typo causes an error rather than a silent bug.