Привет, друзья!
В этом небольшом "туториале" я хочу показать вам, как реализовать простое, но эффективное решение для управления состоянием React-приложений.
Немного забегая вперед, скажу, что решение получилось чуть менее производительным, чем "классическое" сочетание хука useReducer() и инструментов, предоставляемых Context API (которые, собственно, и составляют ядро решения).
Решение представляет собой результат нескольких экспериментов, направленных на максимальное упрощение работы с контекстом React, и во многом вдохновлено Vuex — официальным инструментом для управления состоянием Vue-приложений.
Решение не является законченным и находится в стадии активной разработки, поэтому приветствуются любые замечания и предложения, любая конструктивная критика.
Пока мне не представилось возможности испытать решение в "полевых условиях" (я намерен сделать это при первом удобном случае), но кажется, что оно подойдет для разработки приложений любой сложности при соблюдении двух важных условий:
- В хранилище (
store) должно храниться только глобальное состояние. Я не буду утомлять вас рассуждениями на тему "Что такое состояние приложения? Какое состояние является локальным, а какое глобальным?" и т.д. Лично я исхожу из предположения, что любое состояние является локальным, пока не доказано обратное, т.е. пока не возникнет необходимости в его распределении между автономными компонентами. - Провайдер контекста должен размещаться максимально близко к компонентам, потребляющим контекст. Это называется коллокацией (collocation) или размещением совместного состояния. Логика принятия решения о том, каким является состояние и где его размещать выглядит примерно так:
Исходный код проекта находится здесь.
Песочница:
Обратите внимание: статья рассчитана на разработчиков, который имеют некоторый опыт работы с React, уставших от Redux и иже с ним
Интересные статьи
Интересные статьи
