React-Redux: Fixed Action Types

Intro

One way to prevent type errors while using React-Redux is to create a validation list for action types, also known as fixed action types, so that we can be sure we donโ€™t make any typos while assigning types to actions and reducers.

Action Types File

We can start by making a new file in the actions directory called types, and in this file we just assign variables to the type strings.

actions/types.js
export const SIGN_IN = 'SIGN_IN';
export const SIGN_OUT = 'SIGN_OUT';

The benefit here is that if we try to reference one of these variables later, if we mistype it we will get a warning that the reference is undefined.

Using Action Variables

To use the action type variables that we have created we simply have to import them and replace the strings with their equivalent variables.

actions/index.js
import { SIGN_IN, SIGN_OUT } from './types'
export const signIn = () => {
  return {
    type: SIGN_IN,  };
};

export const signOut = () => {
  return {
    type: SIGN_OUT,  };
};
reducers/authReducer.js
import { SIGN_IN, SIGN_OUT } from '../actions/types'
const INITIAL_STATE = {
    isSignedIn: null
};

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case SIGN_IN:            return {...state, isSignedIn: true };
        case SIGN_OUT:            return {...state, isSignedIn: false };
        default:
            return state;
    }
};