Why I should set redux actions type with an exported constants?

Question

I'm trying to learn react with redux, I've read in the main documentation of redux, we should store actions types into one js files and then export all constants and use them into type, for example it's simple mode:

export function itemsAction(items) {
    return {
        type: 'ITEMS',
        data: items
    }
}

But apparently I should do in this format:

import { types } from './Types';

export function itemsAction(items) {
    return {
        type: types.ITEMS,
        data: items
    }
}

But what's the main benefit of this trick? actions are fixed and never changes, why I should set the action types from variables and import all types ?

Thanks

Answer 1

Because it's good to know you're using an object property rather than a raw string, since raw strings are prone to typos. Take your example:

export function itemsAction(items) {
    return {
        type: 'ITEMS',
        data: items
    }
}

Now let's say I have a reducer to handle that action that also uses a raw string:

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ITESM':
      return state.map(item => item.something = "potato")
    default:
      return state
  }
}

In the reducer, I misspelled the action type for its case. But due to how Javascript and Redux work, it won't get noticed as an error in your IDE linting, nor will it produce any errors when you execute the code. You'll dispatch the action, and it will silently fail. Nothing will happen, no action, no errors, nothing. This can be a pain to debug.

In addition, what if you want to change the name of an action. It's good to just go change the value in the object, rather than do a big find and replace across your whole project, hoping you don't overwrite something you didn't mean to in the process.

Plus it's just nice to have all your action types in one place, so you can go through and see what you have available, rather than looking through all your action files. Once your project grows, you'll be glad you did it.

Also, on Typescript it's especially useful, since if you try to use an action you haven't defined it won't even build, so you get some build time safety.

Answer 2

This may be a duplicate of this question.

My answer though

Action types are going to be referred to several times in your code. For example, in your reducer, you may also refer to your action type:

import {
  types
} from './actions'

...

function exampleReducer(state, action) {
  switch (action.type) {
    case types.ITEMS:
       // do something here
    default:
      return state
  }
}

Then you don't want to write type: 'ITEMS' again there. You want to write types.ITEMS to avoid repeating yourself. It's always a good practice to refer to constant variables rather than writing them over again in plain strings.

Types get especially hard to remember when you have multiples of them and usages in multiple files. So it's really good for you to have action types as constants.

It's a good habit to see your action types in one file sorted out so that you can always have a look over it and change them as needed (as opposed to changing 'ITEMS' to 'ITEM' in your 4 files if you were to change the name of the action type).

ETC

You usually do something like

import {
  ITEMS,
  ...more action types
} from './actions'

and refer to it directly (which is more concise):

export function itemsAction(items) {
    return {
        type: ITEMS,
        data: items
    }
}

Answer 3

It's beneficial to keep actions in a separate file because it reduces the code duplication. Your actions names will be required in actions, reducers (possibly multiple reducers) and epics (if you use redux-observable). Always copy-pasting action name string is error prone, you can easily end up with a typo.

If you put action names in a separate file, you can be more confident about using them in the system and refactoring later since you have a single point of truth.

If you decide to use TypeScript, try something like typesafe-actions. TypeScript eliminates the need for having action names in a separate constants file since action name can become a real type. This opens up a lot of things like having intellisense when writing actions in reducers and epics