React: простое и эффективное решение для управления состоянием приложений

Привет, друзья!

В этом небольшом "туториале" я хочу показать вам, как реализовать простое, но эффективное решение для управления состоянием React-приложений.

Немного забегая вперед, скажу, что решение получилось чуть менее производительным, чем "классическое" сочетание хука useReducer() и инструментов, предоставляемых Context API (которые, собственно, и составляют ядро решения).

Решение представляет собой результат нескольких экспериментов, направленных на максимальное упрощение работы с контекстом React, и во многом вдохновлено Vuex — официальным инструментом для управления состоянием Vue-приложений.

Решение не является законченным и находится в стадии активной разработки, поэтому приветствуются любые замечания и предложения, любая конструктивная критика.

Пока мне не представилось возможности испытать решение в "полевых условиях" (я намерен сделать это при первом удобном случае), но кажется, что оно подойдет для разработки приложений любой сложности при соблюдении двух важных условий:

1. В хранилище (store) должно храниться только глобальное состояние. Я не буду утомлять вас рассуждениями на тему "Что такое состояние приложения? Какое состояние является локальным, а какое глобальным?" и т.д. Лично я исхожу из предположения, что любое состояние является локальным, пока не доказано обратное, т.е. пока не возникнет необходимости в его распределении между автономными компонентами.
2. Провайдер контекста должен размещаться максимально близко к компонентам, потребляющим контекст. Это называется коллокацией (collocation) или размещением совместного состояния. Логика принятия решения о том, каким является состояние и где его размещать выглядит примерно так:

Исходный код проекта находится здесь.

Песочница:

Обратите внимание: статья рассчитана на разработчиков, который имеют некоторый опыт работы с React, уставших от Redux и иже с ним