In React, what is the best way to define action types?

Question

In React, which one of the following ways is the best way to define action types?

First way:

Defining actions using strings like the following:

const actionCreatorExample = (value) => {
  return { type: 'SET_RESPONSE', value };
}

Second way:

Defining action types in an object and referring to action types by accessing the values of that object. Like this:

export const actionTypes = {
  SET_RESPONSE: 'SET_RESPONSE'
};

import actionTypes from './actionTypes';

const actionCreatorExample = (value) => {
  return { type: actionTypes.SET_RESPONSE, value };
}

The second way looks neat but why waste memory by storing the actionTypes object? Any thoughts?

Answer 1

The way I use.

Folder structure

-- actions -- operations -- types -- reducers

// types
const IS_MOBILE = 'root/IS_MOBILE';
const SCROLL_POS = 'root/SCROLL_POS';
const OPEN_MENU = 'root/OPEN_MENU';

export {
  IS_MOBILE,
  SCROLL_POS,
  OPEN_MENU,
};

// actions

export const getResolution = boolean => ({
  type: actionType.IS_MOBILE,
  payload: boolean,
});

export const getScrollPos = () => ({
 type: actionType.SCROLL_POS,
 payload: window.pageYOffset || document.documentElement.scrollTop,
});


export const stateMenu = boolean => ({
  type: actionType.OPEN_MENU,
  payload: boolean,
});

Answer 2

I wouldn't say "best way", but here's how I do it. I have a helper function to build my actions like this:

const action = (type, payload = {}) => ({ type, payload });

export default function buildSimpleAction(baseName) {
  return {
    actionType: baseName,
    actionCreator: args => action(baseName, { ...args })
  };
}

I declare them as:

import buildSimpleAction from 'redux/buildSimpleAction';

export const { actionType: DISTINCT_ID, actionCreator: setDistinctId } = buildSimpleAction('DISTINCT_ID');

And finally I can use them like:

import { DISTINCT_ID, setDistinctId } from 'redux/actions'

It may seem complicated to use a helper function to create a simple action, but I have other types of actions that are not 'simple', like API calls. The api helper returns, instead of a single action, an object with several actions inside (request, success, failure...).

Answer 3

Both are preferable. First case can be a little cleaner in small apps. As redux docs says:

You don't have to define action type constants in a separate file, or even to define them at all. For a small project, it might be easier to just use string literals for action types. However, there are some benefits to explicitly declaring constants in larger codebases. Read Reducing Boilerplate for more practical tips on keeping your codebase clean.

https://redux.js.org/basics/actions

Second case is more preferable in large apps. Because there can be a lot of types and you can make a typo. So better if you define them in one place and then simply use from that place.

Answer 4

That's rather an opinion-based question, however it tend to be a better idea to store all the const, types and interfaces related with specified part of your project in a separated file, called model.js or constants.js . The main profit out of it - besides it helps to keep your code cleaner - would be the reusability.

If you would ever decide to use TypeScript and union types or discriminated unions , it will be much easier for you to just use a variable which holds the action type than writing it once again by hand (also you will reduce a chance to misspell the action type name).

Summarizing - I would vote for the second method. And that's how I'm doing it in my every project.

Answer 5

实际上，我看到 Brian Holt 的新 ReactJS 课程正在谈论这部分，他更喜欢在另一个文件中创建操作类型，并说这对扩展项目很有用，您将所有操作类型都放在一个文件中，这样会更清晰和可读， 检查如何创建 actionCreators

Answer 6

I'm doing it by grouping an action type with corresponding action creator function:

// action type
const someActionType = 'distinct action type';
// action creator
const someActionCreator = optionalParam => ({type: someActionType, optionalParam})