Автор оригинала: FreeCodeCamp Community Member.
Андреем Гончаров
Что мы собираемся прикрыть здесь?
В этой статье мы будем обсуждать несколько способов/советов/трюков/древние черные волшебные ритуалы, чтобы уменьшить котельную плату на нашей перегруженной сварении приложения Redux (и Ngrx!). Я придумал эти годы от опыта из первых рук.
Позвольте мне быть честным с вами всем. Я хотел говорить только о моей новой микро библиотеке Flux-Action-Class сначала. Но кажется, что иногда технологические блоги выглядят все больше и больше похоже на твиттер в последнее время … и, возможно, вы хотите более значимое долгое время. Поэтому я подумал: «Что, черт возьми, у меня есть какой-то опыт и лучшие практики, которые я пролил какой-то пот и кровь. Может быть, это может помочь некоторым людям там. Может быть, люди могут помочь мне улучшить некоторые из Это.”
Определение котельной
Давайте посмотрим на типичный пример того, как сделать запросы AJAX в Redux. В этом конкретном случае давайте представим, что мы хотим получить список кошек с сервера.
Если вам интересно, почему у меня селекторные фабрики (оформление …) посмотрите здесь
Я ухожу с побочной обработкой эффекта нарочно. Это тема для целой другой статьи, полной гнева подростка и критики для существующей экосистемы: D
Этот код имеет несколько слабых мест:
- Создатели действий являются сами уникальными объектами, но нам все еще нужны типы действий для целей сериализации. Можем ли мы сделать лучше?
- Как мы добавляем объекты, мы продолжаем дублировать одну и ту же логику для переворачивания
Загрузкафлаг. Фактические данные сервера и то, как мы хотим обрабатывать, могут измениться, но логика дляЗагрузкавсегда одинаково. Можем ли мы избавиться от этого? - Оператор коммутатора O (N) (n) (который не является твердым аргументом сама по себе, потому что redux в любом случае не очень исполнен). Redux требует пару дополнительных строк кода для каждого случая, а коммутаторы не могут быть легко объединены. Можем ли мы понять что-то более исполнимое и читаемое?
- Должен ли нам действительно сохранить ошибку для каждого объекта отдельно?
- Использование селекторов – хорошая идея. Таким образом, у нас есть абстракция в нашем магазине и может изменить свою форму, не нарушая все приложение, просто настроив наши селекторы. Тем не менее, мы должны создать завод для каждого селектора из-за того, как работает Memoizaion. Есть ли другой способ?
Совет 1: избавиться от типов действий
Ну не совсем. Но мы можем сделать JS генерировать их для нас!
Давайте займем минуту, чтобы подумать, почему нам даже нужны типы действий. Конечно, помочь Редуктору как-то дифференцировать между входящими действиями и соответственно изменить наше государство. Но действительно ли это должно быть строкой? Если бы у нас был способ создать объекты (действия) определенных типов … Классы для спасения! Мы, безусловно, можем использовать классы как создатели Действия и делают Переключатель по типу. Как это:
Все хорошо, но вот вещь … Мы больше не можем сериализовать и десериализировать наши действия. Они больше не являются простыми объектами с прототипом объекта. Все имеют уникальные прототипы, которые на самом деле делают переключение Action.Constructor Работа. Черт, мне понравилась идея сериализации моих действий к строке и прикреплению его к сообщениям ошибок. Так мы могли бы сделать еще лучше?
На самом деле да! К счастью, у каждого класса есть имя, которое является строкой, и мы могли бы их использовать. Таким образом, для целей сериализации каждое действие должно быть простой объект с полем Тип (Пожалуйста, посмотрите здесь учиться, что еще должно быть любое уважение к себе). Мы могли бы добавить getter Тип каждому из наших классов, которые будут использовать имя класса.
Это будет работать, но так мы не можем префиснуть наши типы действий как это Отличное предложение предполагает (на самом деле, мне нравится его преемник еще больше). Чтобы обойти префикс, мы должны перестать использовать имя класса напрямую и создать еще один добытчик для него. На этот раз статический.
Давайте немного пополним, чтобы избежать дублирования кода и добавить еще одно предположение, чтобы еще больше уменьшить ботиную табличку. Если действие является ошибкой, действие полезная нагрузка должен быть экземпляром Ошибка . Отказ
На данный момент он отлично работает с Ngrx. Redux жалуется на рассылку непростых объектов (он подтверждает цепочку прототипа). К счастью, JS позволяет нам вернуть произвольную ценность от конструктора, и нам действительно не нужны наши действия, чтобы иметь прототип.
Не заставлять вас ребята, копировать-вставку ДЕЙСТВИТЕЛЬСТВОКОВОДСТВО Класс и беспокойтесь о его надежности, я создал Небольшая библиотека под названием Flux-Action-Class , который уже имеет весь этот код, покрытый тестами с 100% кодовым покрытием, записанным в Tymdercript для проектов TypeyScript и JavaScript.
Совет 2: Комбинируйте свои редукторы
Идея проста: использовать Коммунатории Не только для редукторов верхнего уровня, но для объединения редукторов для Загрузка и другие вещи. Пусть код говорит сам по себе:
Совет 3: Выключитесь от коммутатора
Используйте объекты и выберите из них по ключу вместо этого! Выбор свойства объекта по ключу O (1), и он выглядит очень чище, если вы спросите меня. Как это:
Я предлагаю нам рефактору Редукторы совсем немного. С введением карт редуктора имеет смысл вернуть карту редуктора от Редукторы Отказ Мы могли бы продлить его при необходимости (в отличие от переключателей).
Официальная документация Redux упоминает это , но почему-то я видел много людей, все еще использующих выключатели. Там уже есть Библиотека для Творцектор Отказ Не стесняйтесь использовать его.
Совет 4: иметь глобальный обработчик ошибок
Не нужно, чтобы сохранить ошибку для каждого объекта. В большинстве случаев нам нужно отобразить диалоговое окно ошибки или что-то. Такая же ошибка диалогового окна для всех них!
Создайте глобальный обработчик ошибок. В самом простом случае это может выглядеть так:
Тогда в вашем побочном эффекте поймать блок отправки Reverinit Отказ Это может выглядеть так с Redux-Thunk :
Тогда вы можете прекратить предоставление редуктора для Ошибка . часть состояния кошек и CatsgetError Просто чтобы перевернуть Загрузка флаг.
Совет 5: остановить воспоминание все
Давайте посмотрим на беспорядок, у нас с селекторами еще раз. Я опущел МакияжCatsError Из-за того, что мы обнаружили в предыдущем разделе.
Почему мы создадим воменевшие селекторы для всего? Что там, чтобы мемуизовать? Выбор поля объекта по ключу (что именно то, что здесь происходит) – это o (1). Просто напишите регулярную неметремизированную функцию. Используйте мемузаризацию только тогда, когда вы хотите изменить форму данных в вашем магазине таким образом, чтобы требуется не постоянное время, прежде чем вернуть его к вашему компоненту.
Memoation может иметь смысл только в том случае, если вычислены некоторые производные данные. Для этого примера давайте представим, что каждый кот является объектом с полем Имя И нам нужна строка, содержащая имена всех кошек.
Заключение
Давайте посмотрим на то, что мы начали с:
И что в результате есть:
Надеюсь, вы нашли что-то полезное для вашего проекта. Не стесняйтесь сообщить мне ваши отзывы! Я, безусловно, ценю любую критику и вопросы.