0 votes
in ReactJS by

What is the purpose of the constants in Redux?

1 Answer

0 votes
by

Constants allows you to easily find all usages of that specific functionality across the project when you use an IDE. It also prevents you from introducing silly bugs caused by typos – in which case, you will get a ReferenceError immediately.

Normally we will save them in a single file (constants.js or 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'

In Redux you use them in two places:

  1. During action creation:

    Let's take actions.js:

    import { ADD_TODO } from './actionTypes';
    
    export function addTodo(text) {
      return { type: ADD_TODO, text }
    }
  2. In reducers:

    Let's create reducer.js:

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

Related questions

0 votes
+1 vote
0 votes
asked Dec 22, 2023 in ReactJS by john ganales
0 votes
asked Nov 8, 2023 in ReactJS by GeorgeBell
...