freeCodeCamp Challenge Guide: Use const for Action Types

Use const for Action Types


Problem Explanation

Using a const for Action Types has a big advantage over using strings.

Accidental mispellings of strings can lead to errors.

You may spell type: 'LOGIN' correctly in your action creator but mispell type: 'LOGN' in your reducer as shown below.

const loginUser = () => {
  return {
    type: "LOGIN"
  };
};

const authReducer = (state = defaultState, action) => {
  switch (action.type) {
    case "LOGN":
      return {
        authenticated: true
      };

    case "LOGOUT":
      return {
        authenticated: false
      };

    default:
      return state;
  }
};

By using a const for the Action Type, it won’t matter if your string is mispelled because both the reducer’s switch statement and the Action Type are referencing the same const. Using a const may also lead your code editor to suggesting the const as you are typing it, thus reducing the chance of mispelling the const.


Solutions

Solution 1 (Click to Show/Hide)
// change code below this line
const LOGIN = 'LOGIN';
const LOGOUT = 'LOGOUT';
// change code above this line

const defaultState = {
  authenticated: false
};

const authReducer = (state = defaultState, action) => {

  switch (action.type) {

    case LOGIN:
      return {
        authenticated: true
      }

    case LOGOUT:
      return {
        authenticated: false
      }

    default:
      return state;

  }

};

const store = Redux.createStore(authReducer);

const loginUser = () => {
  return {
    type: LOGIN
  }
};

const logoutUser = () => {
  return {
    type: LOGOUT
  }
};

3 Likes