Это мелочи, которые меняют ваш продукт. 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 за рецензирование этой статьи 😘