Шпаргалка по Redux с примерами кода (stylesheet)

Шпаргалка по Redux (Stylesheet Jest)

Создание хранилища

Хранилище создается с помощью редуктора, принимающего текущее состояние и возвращающего новое состояние на основе полученной операции.

Использование хранилища

Для того, чтобы измененить состояние хранилища, необходимо отправить операцию в редуктор:

Провайдер

Компонент <Provider> делает хранилище доступны для компонентов. Компонент подключается к хранилищу с помощью метода connect():

Привязка (mapping) состояния

Объединение редукторов

Посредники

Посредники (middlewares) — это декораторы для dispatch(), позволяющие принимать операции и выполнять определяемые ими задачи:

Применение посредников

Шпаргалка по Redux. Лучшие практики по использованию React

  1. Названия компонентов должны начинаться с большой буквы.
  2. Компоненты должны быть маленькими и отвечать за выполнение одной задачи.
  3. Компоненты должны иметь небольшое описание.
  1. В коде должен использоваться синтаксис ES6.
  2. Названия переменных и функций, которые не являются константами и конструкторами, соответственно, и которые состоят из нескольких слов, должны быть в стиле lowerCamelCased.
  3. Предопределенные константы именуются в верхнем регистре, слова разделяются нижним подчеркиванием — UPPER_UNDERSCORED.
  4. При проверке типа переменной, название типа указывается в кавычках (не оборачивается в фигурные скобки), а для сравнения используется оператор строго равенства:
  1. В простых случаях вместо оператора if/else должен использоваться тернарный оператор:
  1. Вместо контейнеров следует использовать фрагменты:

Сокращенный вариант:

  1. Все файлы, относящиеся к одному компоненту, должны находиться в одной директории
  2. Следует отдавать предпочтение функциональным компонентам.
  3. В качестве обработчиков событий не следует использовать анонимные функции.
  4. Следует избегать использования встроенных стилей.
  5. Чтобы скрыть компонент, нужно вернуть null при его рендеринге.
  6. Компоненты высшего порядка должны использоваться только для решения проблем взаимодействия компонентов между собой.
  7. Индексы элементов массива не должны использоваться в качестве ключей (keys).
  8. В JSX вместо тернарного оператора могут использоваться короткие вычисления:

Возможно вам будет интересно — Возможно вам будет интересно — Шпаргалка по Jest с примерами кода.