Почему я должен устанавливать тип избыточных действий с экспортируемыми константами?

Question

Я пытаюсь научиться реагировать с избыточностью, я прочитал в основной документации по избыточности, мы должны хранить типы действий в одном файле js, а затем экспортировать все константы и использовать их в тип, например, это простой режим:

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

Но, видимо, я должен сделать в этом формате:

import { types } from './Types';

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

Но в чем главное преимущество этого трюка?действия являются фиксированными и никогда не меняются, почему я должен устанавливать типы действий из переменных и импортировать все типы?

Спасибо

Answer 1

Поскольку полезно знать, что вы используете свойство объекта, а не необработанную строку, поскольку необработанные строки подвержены опечаткам. Возьмите свой пример:

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

Теперь, допустим, у меня есть редуктор для обработки этого действия, который также использует необработанную строку:

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

В редукторе я неправильно написал тип действия для его случая. Но из-за того, как работают Javascript и Redux, он не будет замечен как ошибка в вашей привязке IDE, а также не вызовет ошибок при выполнении кода. Вы отправите действие, и оно молча провалится. Ничего не будет, никаких действий, никаких ошибок, ничего. Это может быть проблемой для отладки.

Кроме того, что делать, если вы хотите изменить название действия. Хорошо просто изменить значение объекта, а не искать и заменять весь свой проект, надеясь, что в процессе вы не перезаписаете то, что не хотели.

Кроме того, приятно иметь все типы действий в одном месте, чтобы вы могли просмотреть и просмотреть все имеющиеся у вас возможности, а не просматривать все файлы действий. Как только ваш проект расширится, вы будете рады, что сделали это.

Кроме того, в Typescript это особенно полезно, поскольку если вы попытаетесь использовать действие, которое вы не определили, оно даже не будет выполнено, поэтому вы получите некоторую безопасность во время сборки.

Answer 2

Это может быть копия этого вопроса .

Мой ответ, хотя

Типы действий будут упоминаться несколько раз в вашем коде.Например, в вашем редукторе вы также можете сослаться на ваш тип действия:

import {
  types
} from './actions'

...

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

Тогда вы не хотите снова писать type: 'ITEMS'.Вы хотите написать types.ITEMS, чтобы не повторяться. Всегда полезно обращаться к константным переменным, а не записывать их заново в виде простых строк.

Типы особенно трудно запомнить, когда у вас их несколько и используются в нескольких файлах.Так что для вас действительно полезно иметь типы действий в качестве констант.

Хорошей привычкой является сортировка типов ваших действий в одном файле, чтобы вы всегда могли просмотреть их и при необходимости изменить их (в отличие от изменения 'ITEMS' на 'ITEM' в ваших 4файлы, если вам нужно изменить имя типа действия).

ETC

Обычно вы делаете что-то вроде

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

и ссылаетесь на него напрямую (что болеекраткий):

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

Answer 3

Полезно хранить действия в отдельном файле, потому что это уменьшает дублирование кода. Имена ваших действий потребуются в действиях, редукторах (возможно, нескольких редукторах) и эпосах (если вы используете наблюдаемую избыточность). Строка имени действия копирования-вставки всегда подвержена ошибкам, вы легко можете опечататься.

Если вы поместите имена действий в отдельный файл, вы можете быть более уверены в их использовании в системе и последующем рефакторинге, поскольку у вас есть единственная точка правды.

Если вы решили использовать TypeScript, попробуйте что-то вроде typesafe-actions . TypeScript устраняет необходимость иметь имена действий в отдельном файле констант, поскольку имя действия может стать реальным типом. Это открывает много вещей, таких как интеллигентность при написании действий в редукторах и эпопеях