Основано на книге Дэна Абрамова Начало работы с Redux: Пожалуйста, идите, взгляните на это. Это потрясающе! Очень простой. кратко и очень хорошо объясняет весь Redux.
3 принципа Redux (или, если уж на то пошло, React):
- Все изменения в приложении, включая данные и состояние пользовательского интерфейса, сохраняются в одном объекте состояния или в дереве состояний. Состояние — это минимальное представление данных или состояния пользовательского интерфейса.
- Состояние всегда доступно только для чтения. Отправить действие для изменения состояния. Действие — это минимальное представление изменения данных или состояния пользовательского интерфейса. У действия есть поле type, которое не определено.
- Функция редуктора: состояние приложения или пользовательский интерфейс наиболее предсказуемы, когда они рассчитываются с использованием чистой функции действия и состояния. fn (oldState, action) =› nextState
3 функции Redux:
createStore: создает магазин. Магазин Redux, который объединяет 3 принципа Redux. Он принимает функцию reducer. Он делает 3 вещи:
- Удерживает текущее состояние.
- Отправляет действия.
- Подписывается на действия и вызывает слушателей.
3 важных метода:
- getState: возвращает текущее состояние.
- диспетчеризация: действия по отправке (используются, когда мы хотим изменить состояние).
- подписка: Давайте приложению подписаться на магазин с обратным вызовом, который вызывается при отправке действия.
Избегайте мутаций массива, используя concat или … (оператор распространения). Избегайте мутаций объектов, используя Object.assign.
Состав редуктора
Различные редюсеры обновляют разные части дерева состояний. Редьюсеры — это обычные функции JS, поэтому они могут вызывать другие редьюсеры и делегировать работу.
combineReducers: возвращает редьюсер верхнего уровня. Он принимает объект, который имеет сопоставление между именами полей состояния и управляющими ими редукторами.
Презентационные и контейнерные компоненты
Всегда разбивайте свой код на компоненты Presentational и Container.
Презентационные компоненты: содержат логику.
Контейнерные компоненты: содержат Redux (диспетчеры действий). Его задача — соединить презентационные компоненты с хранилищем и предоставить им необходимые данные и поведение.
Преимущество. Логика и представление разделены, поэтому об этом легко рассуждать. Данные и обратные вызовы собраны в одном месте.
Недостаток. Это нарушает инкапсуляцию. Много реквизитов и обратных вызовов должны быть переданы по дереву. Компонент-контейнер-предок должен знать и хранить много данных, необходимых всем его дочерним компонентам.
Решение состоит в том, чтобы разбить приложение на несколько самодостаточных компонентов контейнера. Это делает поток данных неявным, но позволяет повторно использовать компоненты.
Компонент контейнера, который обращается к состоянию хранилища, также должен быть подписан на хранилище, чтобы он мог повторно отображать себя при обновлении состояния хранилища. Таким компонентам обычно не нужны какие-либо реквизиты из их компонентов-контейнеров.
Неявная передача store по дереву
Используйте компонент Provider из библиотеки react-redux. Он передает хранилище вниз по дереву в дочернем контексте.
Используйте connect, чтобы получить компоненты контейнера для соответствующих презентационных компонентов. Он принимает 2 функции (mapStateToProps: возвращает свойства с заданным состоянием, mapDispatchToProps: возвращает обратные вызовы с учетом отправки) -> Это помогает удалить много шаблонов.
Документация действий
Документируйте все объекты действий в одном месте. Это помогает с документацией и возможностью повторного использования.
