Используете Redux? Используете хуки? пришло время протестировать перехватчики реакции-редукции
Если вы здесь, то, вероятно, слышали о React v16.8, который запустил новый подход к созданию компонентов и поддержанию их жизненного цикла с помощью хуков (ознакомьтесь с API).
Хотя хуки обратно совместимы, очень интересно начать использовать их в наших приложениях, и хорошая новость заключается в том, что хуки redux присоединились к нам!
С модной задержкой react-redux опубликовал новую версию (v7.1.0), которая предлагает набор API-интерфейсов redux с альтернативой существующему connect()Higher Order Component, который позволяет нашим функциональным компонентам подписаться и общаться с redux store.
Изменения перехватчиков реакции и перехватов response-redux приводят к потенциальным структурным изменениям в том, как мы пишем и организуем наш код, а также в том, как мы относимся к логической структуре и думаем о ней.
В следующем блоге я попытаюсь упростить использование новых хуков redux, используя краткое описание API, предложение структуры и базовый пример.
быстрый обзор хуков react-redux
useSelector (selector: state = ›{}, [equalFn ?: () =› {}]) извлекает значения из состояния хранилища redux, по сути аналогично функцииmapStateToProps, реализованной в хуке, с некоторыми небольшими отличиями. . Селектор будет запускаться всякий раз, когда функциональный компонент выполняет рендеринг, он также запускает селектор всякий раз, когда действие отправляется в хранилище redux. По умолчанию equalFn является ссылочным равенством (===), что означает, что когда действие будет отправлено, селектор вызовет повторную визуализацию, если одно из полей изменилось, что отличается от mapState. Если вы хотите сохранить поведение mapState, импортируйте shallowEqual и передайте его в качестве второго параметра или используйте мемоизированную библиотеку, такую как повторный выбор.
useDispatch () возвращает функцию Dispatch, которая позволяет нам отправлять действия в хранилище redux (тот же API, что и react-redux-hooks), аналогично mapDispatchToProps. Чтобы избежать ненужного рендеринга дочернего компонента при изменении ссылок, рекомендуется запоминать его с помощью useCallback.
useStore () - не обычный обработчик, который возвращает ссылку на то же хранилище Redux, которое было передано компоненту <Provider>.
Не пропускайте redux hooks полную документацию по API https://react-redux.js.org/next/api/hooks#hooks.
Изменение структуры
В старом мире (в терминах сокращения) мы думали о нашей структуре как о молекулярной модели. «Компоненты» - это атомы, функциональные компоненты без состояния, а «Контейнеры» - это молекулы, связанные с состоянием и связанные компоненты с собственным жизненным циклом и подпиской на хранилище redux. Теперь у нас есть один способ создания компонентов, который меняет наше представление о структуре. Должны ли мы по-прежнему делиться на компоненты и контейнеры? Это хороший вопрос.
Раньше в больших приложениях наличие контейнера с большим списком извлеченных свойств хранилища redux и диспетчеров действий приводило к структуре, в которой представление и связанные с ним методы хранилища redux были разделены:
Столкнувшись с той же проблемой масштабирования, что и контейнер с большим количеством ловушек и логики, он может выглядеть перегруженным и неорганизованным. Мой новый подход - разделить контейнер на отдельный файл-перехватчик:
Базовый пример
Хотя мы так устали от знаменитого примера со списком Todo, я все же думаю, что это был бы более ясный и простой сценарий для понимания нового мира react-redux.
Заявление об ограничении ответственности. Исходный код списка Todo был взят из сокращенной документации. Пример ниже содержит изменения структуры, рефакторинг хуков и мемоизированное состояние редукции с помощью повторного выбора.
Приложение списка задач позволяет пользователям создавать новые элементы задач, выполнять их, отображать и фильтровать их статусы.
TodoList - это «контейнер», который отображает строку addTodo, элементы задачи и строку фильтра со статусами «выполнено», «все» и «активно».
Строка добавления задачи получит обратный вызов addTodo из настраиваемого хука useTodo, который отправляет действие добавления задачи в хранилище redux всякий раз, когда вы отправляете элемент задачи.
TodoItems отображает извлеченный объект из хранилища redux. Каждый элемент задачи получает функцию onclick, которая отправляет действие изменения статуса в хранилище redux.
Строка фильтра предоставляет возможность фильтровать элементы списка дел на основе их статусов. Выбранный фильтр извлекается из хранилища redux, а обратный вызов onclick отправляет действие фильтрации в хранилище redux.
Файл хуков содержит реализацию redux-хуков, обернутую пользовательскими хуками для каждого «связанного» компонента. useSelector получает мемоизированный селектор с помощью повторного выбора.
Полный пример можно найти в моем репо: https://github.com/yarindeoh/react-redux-alpha
Резюме
Комбинация React Context API и useReducer () вызвала ажиотаж и новый набор мнений о том, что библиотек управления состоянием, таких как Redux, можно избежать. Я все еще не могу отказаться от их потрясающих возможностей отладки, организованной структуры, концепций и экосистемы.
Новые хуки react-redux просты в использовании! Лично я ждал релиза хука, чтобы начать новые проекты на работе, и у меня была возможность отслеживать решения и улучшения, принимаемые участниками react-redux. Его API динамически меняется на основе отзывов нашего сообщества, что очень важно. Следите за их релизами, следите за ними в твиттере, и пусть сила будет с нами.
Подписывайтесь на меня в твиттере @DekelYarin
📝 Прочтите этот рассказ позже в Журнале.
👩💻 Просыпайтесь каждое воскресное утро и слушайте самые интересные истории из области технологий, ожидающие вас в вашем почтовом ящике. Прочтите информационный бюллетень« Примечательно в технологиях .
