Публикации по теме 'redux'
Понимание Redux
Цель — Минимальный код для понимания избыточного потока.
Посмотреть код в действии в jsbin
Приложение счетчика с двумя кнопками для увеличения и уменьшения количества и меткой для отображения текущего количества.
Компоненты: Добавить — компонент для увеличения значения счетчика на 1 Вычесть — компонент для уменьшения значения счетчика на 1 Результат — метка, показывающая значение счетчика в любой данное время
// Redux react binding
const { connect, Provider } = ReactRedux;..
Async Redux не существует
Иногда люди спрашивают, как лучше всего справиться с асинхронностью в Redux? По этому поводу есть официальная документация, но я предлагаю пересмотреть некоторые базовые концепции, чтобы увидеть, действительно ли это так просто.
Основы
state - это объект. Он используется как значение где-то в пользовательском интерфейсе или для его рендеринга:
{
username: "zerocool"
}
action - тоже объект. Он описывает событие ( или команду ), произошедшее в мире приложения...
Как и когда использовать BindActionCreators
Если вы когда-либо использовали Redux с React, вы, вероятно, уже знаете, что компоненты React совершенно не знают о Redux, пока вы не соедините их. Для этого мы используем connect (); функция, предназначенная именно для этого. Однако было бы излишним подключать каждый отдельный компонент к хранилищу Redux. Кажется, что лучше всего подключать компоненты контейнера и передавать эту информацию своим потомкам по мере необходимости. Это можно сделать, сопоставив состояние и действия Redux с..
Мой любимый шаблон проектирования React: сгруппированные слои компонентов
Я был немного одержим оптимизацией структуры папок и иерархии компонентов моих приложений React и, наконец, пришел к решению, которым я вполне доволен.
Компонент Ответственность
Всякий раз, когда я создаю или изменяю Компонент, я постоянно оцениваю и переоцениваю его ответственность. Вот некоторые из них:
Управлять внутренним состоянием Предоставление методов жизненного цикла компонентов Подключитесь к хранилищу Redux (или аналогичной библиотеке управления состоянием) Рендер..
Action, Dispatch и Usereducer() в React
Недавно я узнал об этом хуке реакции useReducer и его использовании, разрабатывая приложение Todo в React JS. У этого приложения не было локального хранилища, поэтому задачи были временными, но основной целью было узнать об действиях и редюсерах.
Редьюсеры используют преимущества действий (объясненных позже) и определяют, что делать, когда вызывается конкретное действие. Действия — это виды задач, которые необходимо выполнить, а редуктор содержит способ выполнения задачи, которая..
Использование Redux для управления состоянием
Избегайте ненужного детализации реквизита, поддерживая глобальное хранилище данных.
В первый раз, когда я изучил Redux… он мне не понравился. Мои проекты становились все больше, и я мог видеть преимущество наличия места для глобального хранения данных, но настройка всего этого казалась немного утомительной и чрезмерно сложной.
В значительной степени это произошло потому, что я использовал Redux единственным способом, которым меня учили, используя connect и mapStateToProps . С..
Дети Redux - Часть 3: redux-zero, stent и choo
Дети Redux - Часть 3: redux-zero, stent и choo
В первой части и второй части сериала мы упорядоченно говорили о Plait , Dutier , dva , Feeble , vdux и hyperapp , которые уже дали импульс в community (не так сильно, как Elm, но) через объединение для обработки состояния на стороне клиента веб-приложений. В последней части нашей серии содержится redux-zero (он же Redux без слишком большого количества шаблонов), стент, вдохновленный конечными автоматами и choo. Да, мы знаем,..
