Когда я начал писать JavaScript, если мне нужно было знать или обновлять значение поля формы, я использовал метод j’ery’s val() . Если бы мне нужно было сделать что-то каждый раз, когда она изменилась, я бы подписаться на его изменение с изменением j’ery () метод. Конечно, Val () не вызывает событие изменения, так что я должен был помнить, чтобы использовать j’ery.trigger() для этого.
Это пример шаблона, который начинается просто — ничего сложного, чтобы узнать — и становится нестабильным и анти-исполнитель быстро. Научиться использовать решение управления состоянием, например, Redux, является дополнительным осложнением, которое требует времени. Управление государством, при правильном использовании, является своего рода дополнительным осложнением в структуре приложения, что делает разработку и тестирование приложения менее сложным.
Технология движется быстро, и теперь наилучшей практикой является государственное управление. Управление государством, используя инструмент, как Redux, который очень популярен для приложений React, создает единый источник правды для состояния приложений. Это очень похоже на использование контейнера, тема, которую я рассмотрел в контексте PHP.
В этой статье я собираюсь рассказать о том, какие проблемы решают инструменты управления состоянием, такие как Redux. В моем следующем посте я буду охватывать компоненты обмена между приложениями React и блоками Гутенберга. Ключевая часть этого поста охватывает с помощью WordPress’ Redux абстракции. Начнем с того, почему.
Единая ответственность государственного управления
Принцип единой ответственности, о котором я писал ранее, обеспечивает простоту в нашем коде, так как каждая функция может делать только одну вещь.
Принцип единой ответственности (SRP) гласит, что каждый программный модуль должен иметь одну и единственную причину для изменения.
Единственной обязанностью государства является управление государством. В приложении React мы можем иметь «тупые» компоненты, которые имеют свое состояние поставляется им в качестве реквизита. Это состояние может исходить от родительских компонентов, в которые они вложены, Redux, макет данных в тестах, независимо. Они являются чистыми функциями — функции, которые принимают входы и создают выход без побочных эффектов — и, следовательно, отделены от государственного управления.
Если представление данных изменяется, это изменение происходит в компоненте React. Если происходит способ обработки обновлений данных, то это изменение происходит в управлении состоянием.
Мы называем Redux, или Vuex, или Flux, или все, что вы используете, единственным источником правды для государства, потому что это единственное место состояние действительно живет. Все остальное — это наблюдение за состоянием.
Несколько основных концепций
В этом разделе, я собираюсь пройти через некоторые основы государственного управления с Redux, который Гутенберг использует. Обсуждение этих концепций, использование Redux в качестве конкретного примера полезно для WordPress и React развития и мешает мне просто писать об абстрактных понятий. Я отмечу, как эти концепции реализованы в Vuex, а так что вы можете видеть эти модели реализованы за React и Redux.
Эти примеры, а также примеры в слайдах из моего выступления на конференции JavaScript для WP взяты из государственного управления модулемUI процессора Caldera Forms. Они упрощаются для ясности. Я рекомендую взглянуть на этот код на Github для полного и более практического примера. Я сделал рефакторинг примеры использовать объект вместо карты. Это стоит отметить, как я определенно рекомендую, начиная с объекта, но рассмотреть другие типы данных, которые могут быть проще управлять.
Редукторов
В Redux состояние управляется функциями редуктора. В функциональных редукторах программирования, например, Array.reduce() в JavaScript, возьмите набор входных данных и снижайте их до одного значения. Это единое значение вывода может быть любого типа. Вы можете считать входы и вернуть в общей сложности в качестве целых.
Редукс-редуктор принимает текущее состояние и возвращает новое состояние. Поскольку React будет повторно рендерироватьтолько только в том случае, если объект, который ему дан, изменился, а не если он был мутирован, мы почти всегда хотим вернуть новый объект в наш Редуктор.
Как правило, мы используем один редуктор для сбора данных и определяем конкретные действия для уменьшения, чтобы действовать. В Redux мы называем эти действия,в Vuex, мы называем их мутациями. Мутации является лучшим термином, на мой взгляд, как они мутируют состояние, но действия является хорошей метафорой, как мы посылаем эти действия в Redux, который карты их на право reducer, и применяет сядомимов.
Функции редукс-редуктора обычно используют объект в качестве второго аргумента, это действие, и используют структуру управления коммутатором на action.type. Например:
Обратите внимание, что я использую оператора распространения при возвращении состояния. Моя цель состояла в том, чтобы добавить в массив магазина в state.processors. Я мог бы использовать state.processors.push() для мутации этого массива, а затем вернулся состояние. Объект обновил бы, как я хотел, но React не будет обновляться в результате.
Почему? Поскольку мутация массива (типа объекта) не создала нового объекта, он обновил объект, на который React была предоставлена ссылка. Мы должны поставить React новый объект.
Это проблема, которую решает Immutable.js. Я рекомендую, когда вы начинаете с Redux, что каждый раз, когда вы раздражаетесь, что React не обновляется должным образом, вы предполагаете, что это потому, что вы мутировали объект вместо создания нового. Это, скорее всего, проблема. Кроме того, прочитайте введение в Immutable.js, но на самом деле не использовать его. Вы можете использовать Immutable.js позже, но пытается узнать, что и Redux и React сразу, слишком много, и вы, вероятно, не нужно, что дополнительный уровень сложности.
Действия
Если вы посмотрите на этот супер простой редуктор, мы можем предположить, что действия будут иметь определенную «форму». Это структура объекта, которая должна быть создана каждый раз, когда мы отправляем это действие. Для того, чтобы сохранить форму этого объекта последовательной на протяжении всего приложения, мы добавляем функцию создателя действия.
Эти функции также являются чистыми функциями и несут ответственность за определение формы действия.
Функции действия сильно связаны с редуктором. Я говорю это потому, что если мне нужно изменить форму, редуктор и действие должны измениться. Я в порядке с этим, потому что он работает, это стандарт, и мы можем сказать, что шаблон действия и редуктор (и селектор) несут ответственность за управление конкретной точки данных в состоянии. И мне это нравится, потому что это повторяющийся шаблон, который получает рефакторинг вместе, когда изменения должны быть сделаны.
Селекторов
Действия говорят редукторам мутировать состояние. Потрясающе, но нам также нужен способ получения данных из состояния и в наши тесты или запросы API. Вот где селекторы приходят дюйма Селекторы несут ответственность за получение правильных данных в нужной форме от состояния.
В Vuex, эквивалент селекций Redux являются getters. Мне нравится это имя, getters или Redux селекторов являются функции, которые получают данные.
Например, если в объекте состояния есть массив публикаций, можно добавить функцию селектора для поиска публикации по идентификатору:
Возвращаясь к примерам из библиотеки процессора Caldera Forms Processor, вот селектор для получения процессора по идентификатору от состояния:
Добавление селекторов в приложение требует библиотеки, как пересмотреть или WordPress ‘модуль данных, который я расскажу в моем следующем посте.
Все, что я показал до сих пор использовал чистые функции. Эти функции должны быть синхронными. В Redux, промежуточники используются для асинхронных действий. Это, вероятно, самая сложная часть создания Redux, по моему опыту.
Простейшее решение, я нашел это WordPress ‘модуль данных. В хранилище данных WordPress можно добавить «решателер». Эта функция разрешители может быть асинхронной и называется, когда селектор с тем же именем вызывается в первый раз, с заданном аргументом (ы).
Например, если у нас есть селектор и разрешитель под названием getPost, для магазина, который отслеживал массив сообщений, в первый раз, selector getPost был назван Запрос WordPress REST API будет сделан, с результатом, установленным в состоянии. Последующие разделы этой должности будет просто использовать значение в состоянии. Это хорошая, простая реализация ленивой загрузки данных.
Если у вас есть селектор и разрешитель, которые запрашиваются по странице, бесконечные прокрутки и загрузки больше интерфейсов типа становятся простыми в управлении.
Вот практический пример, абстрагированный из Кальдера формы ‘Гутенберг блок:
Это Основы
Это более чем достаточно информации, чтобы начать работу с Redux. Я рекомендую попробовать контрпример, и что вы проверить эту статью на Redux и React шаблоны дизайна Дэн Абрамов из команды React. Я также представил на эту тему на Конференции JavaScript для WP, вы можете увидеть мои слайды здесь.
В моем следующем посте я покажу вам, как использовать модуль данных WordPress’Gutenberg для провода управляемого Redux состояния в приложение React, включая блоки Гутенберга.
Источник: torquemag.io
