Какова точка констант в редукции?

Ответ 1

Вы правы, но не о сохранении символов, но после сокращения кода вы можете сэкономить некоторое пространство.

В redux вы используете эти константы, по крайней мере, в двух местах - в ваших редукторах и во время создания действий. Поэтому очень удобно определять константу один раз в некотором файле, например. actionTypes.js

export const ADD_TODO = 'ADD_TODO';
export const DELETE_TODO = 'DELETE_TODO';
export const EDIT_TODO = 'EDIT_TODO';
export const COMPLETE_TODO = 'COMPLETE_TODO';
export const COMPLETE_ALL = 'COMPLETE_ALL';
export const CLEAR_COMPLETED = 'CLEAR_COMPLETED';

И затем требуйте его в файле создателя действий, например. actions.js

import { ADD_TODO } from './actionTypes';

export function addTodo(text) {
  return { type: ADD_TODO, text };
}

И в каком-то редукторе

import { ADD_TODO } from './actionTypes';

export default (state = [], action) => {
  switch (action.type) {
    case ADD_TODO:
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ];
    default:
      return state
  }
};

Это позволяет вам легко найти все способы использования этой константы в проекте (если вы используете IDE). Это также мешает вам вводить глупые ошибки, вызванные опечатками - в этом случае вы сразу получите ReferenceError.

Ответ 2

Я хотел бы процитировать @dan_abramov, автора Redux из комментария к подобной проблеме Github.

Почему это выгодно? Часто утверждается, что константы не нужны, и для небольших проектов это может быть правильным. Для более крупных проектов есть некоторые преимущества для определения типов действий в качестве констант:

• Это помогает сохранить именование согласованным, потому что все типы действий собраны в одном месте.

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

• Список типов действий, которые были добавлены, удалены и изменены в запросе Pull, помогает всем в команде отслеживать объем и реализацию новых функций.

• Если вы делаете опечатку при импорте постоянной действия, вы получите undefined. Это гораздо легче заметить, чем опечатку, когда вы задаетесь вопросом, почему ничего не происходит, когда действие отправлено.

Здесь ссылка на проблема Github

Ответ 3

Это более полезно на других языках, но также несколько полезно в JavaScript. Например, если я использовал "ADD_TODO" во всем коде, а не ADD_TODO, то, если я сделаю ошибку, набрав любую из строк, если это был код типа if (action === 'ADD_TODOz'), когда этот код выполнит, он выполнит неправильная вещь. Но если вы ошибочно указали имя const, if (action === ADD_TODOz), вы получите какой-то ReferenceError: ADD_TODOz is not defined, когда эта строка попытается выполнить, потому что ADD_TODOz является недопустимой ссылкой. И, конечно же, на статическом языке вы получите сообщение об ошибке "время компиляции".

Ответ 4

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

Рассмотрим следующий пример:

render() {
    return (
        veryBigArray.map((item) => {
            return (
                <li key={ index }>
                    { item.value || "Missing Value" }
                </li>
            );
        });
    );
}

Вопрос: Почему я должен извлекать "Недостающее значение" константе?

Ответ: Javascript в основном вызывает new String('Missing value'), создавая таким образом новый объект для каждого элемента в массиве и для каждого выполнения render(). Это необязательно и в зависимости от размера массива может повлиять на производительность