Здравствуйте!
Изучаю реакт, пишу подобие интернет магазина. И возникла парочка вопросов по стейту приложения.
Я разобрался с хуками контекста и редюсера, использовал для создания и хранения состояний, причем для разных моментов создавал свое состояние: стейт фильтров, стейт всяких UI компонентов, стейт где храниться данные полученные с бэкенда. Удобно и просто.
Сейчас решил разбираться с redux, а затем с mobx. И столкнулся с тем что везде используют всего один стейт на все приложение. Гугл не дал ответа, как же все таки оптимальнее: мешать все в один большой стейт или же разбивать на более мелкие. Меня смущает тот факт, что изменение элементарного UI элемента, например стиль вывода привьюшек(сетка или список), будет обновлять весь стейт, что в свою очередь запустит перерисовку всех компонентов на странице.
Возможно, я вообще в корне ошибаюсь, тогда буду благодарен если подскажите лучшую структуру.
Вы в корне ошибаетесь. Изменение всего стейта произойдёт, да. Но перерисовка всех компонентов — нет. В редаксе селекторы-подписки не вызываются, если не поменялся их кусок стейта. А для более полного контроля есть мемоизированные селекторы. Проверьте сами — гуглить, как в хроме включить flash on painting.
Простой