Как лучше всего определить типы действий в React?

Question

В React, какой из следующих способов является лучшим способом определения типов действий?

Первый способ:

Определение действий с использованием строк, подобных следующим:

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

Второй способ:

Определение типов действий в объекте и обращение к типам действий путем доступа к значениям этого объекта.Например:

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

import actionTypes from './actionTypes';

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

Второй способ выглядит аккуратно, но зачем тратить память на хранение объекта actionTypes?Есть мысли?

Answer 1

Я бы не сказал «лучший способ», но вот как я это делаю.У меня есть вспомогательная функция для построения моих действий следующим образом:

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

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

Я объявляю их как:

import buildSimpleAction from 'redux/buildSimpleAction';

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

И, наконец, я могу использовать их как:

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

Может показаться сложным использовать вспомогательную функцию для создания простого действия, но у меня есть другие типы действий, которые не являются «простыми», например, вызовы API.Помощник API возвращает вместо одного действия объект с несколькими действиями внутри (запрос, успех, сбой ...).

Answer 2

На самом деле, я видел новый курс ReactJS для Брайана Холта, который говорил об этой части, и он предпочитает создавать типы действий в другом файле и говорить, что это будет полезно для масштабных проектов, у вас есть все типы действий в одном файле, который будет* более понятный и читаемый, проверьте, как создать actionCreators

Answer 3

Как я использую.

Структура папок

- действия - операции - типы - редукторы

// 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 4

Это скорее вопрос, основанный на мнении, однако, как правило, лучше хранить все константы, типы и интерфейсы, связанные с указанной частью вашего проекта, в отдельном файле, называемом model.js или constants.js.Основная выгода от этого - помимо того, что это помогает сохранить ваш код чище - будет возможность повторного использования.

Если вы когда-нибудь решите использовать TypeScript и union types или discriminated unions, вам будет гораздо проще использовать переменную, которая содержит тип действия, чем писать его один раз.снова вручную (также вы уменьшите вероятность неправильного написания имени типа действия).

Подводя итог - я бы проголосовал за второй метод.И вот как я делаю это в каждом своем проекте.

Answer 5

Оба предпочтительнее.Первый случай может быть немного чище в небольших приложениях.Как гласит Redx Docs:

Вам не нужно определять константы типа действия в отдельном файле или даже вообще их определять.Для небольшого проекта может быть проще использовать строковые литералы для типов действий.Тем не менее, есть некоторые преимущества для явного объявления констант в больших кодовых базах.Прочитайте Редакцию Boilerplate для более практических советов по поддержанию чистоты вашей кодовой базы.

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

Второй случай более предпочтителен в больших приложениях.Потому что может быть много типов, и вы можете сделать опечатку.Так что лучше, если вы определите их в одном месте, а затем просто используете из этого места.