Это мелочи, которые меняют ваш продукт. React и Flux могут быть мелочами, но их использование изменило наш продукт так, как мы и представить себе не могли.

Продолжая улучшать наше приложение, мы боролись с непоследовательностью наших моделей, даже если они были неизменными. Это были общие типы (например, Map, Array), поэтому мы не могли точно проверить propTypes, данные нашим компонентам. 🌀

Поскольку Immutable.js уже был в нашем проекте, мы подумали, что можем использовать Immutable.Record для создания наших моделей, чтобы:

  • экспортировать четкий тип для каждой модели;
  • определить атрибуты модели;
  • при необходимости выставьте геттеры.

Итак, мы можем приступить к определению нашей первой модели, записи Задачи со значением по умолчанию и геттерами:

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

Теперь мы могли максимально использовать эти две записи и реорганизовать наш Redux Reducer, чтобы гарантировать, что состояние нашего хранилища является TaskMap с только записями Task в качестве значений (ключи - Идентификаторы задач):

Наконец, мы можем создать контейнер для представления наших данных и связать их с состоянием нашего приложения. Мы импортируем модель TaskMap для проверки наших свойств:

И мы делаем то же самое в наших дочерних TaskListItem, чтобы гарантировать, что этот компонент получает модель Task:

Теперь, если мы ошибаемся с компонентом TaskListItem, в нашей консоли появится четкое сообщение. 👀

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

Это все, ребята :) Легко настроить, удобно использовать. Теперь у нас есть согласованное представление модели для наших данных. Кроме того, записи можно расширять, и мы можем определять их… Теперь тестирование и отладка стало проще \ o / Следующим шагом может быть определение типов с помощью Flow или Typescript… Увидимся позже!

Благодарим проект Draft.js, поддерживаемый Facebook, и откуда можно почерпнуть отличные идеи о неизменяемой структуре данных, тестах, ясности кода…

Оставьте электронное письмо с записками. Начните отслеживать свою работу со своей командой, клиентами и партнерами в Azendoo (https://www.azendoo.com).

Престижность Antoine Hanriat и Emily Fiennes за рецензирование этой статьи 😘