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

[MaZaAa]

Жесть, а вы все пропагандируете адовый говнокод все хлеще и хлеще. Конечно, если использовать MobX в связке с React, то и писать будет не о чем, все и так будет прекрасно и ни с чем не надо бороться.

[DarthVictor]

Немного не понял, в какой момент компоненты, зависимые от стора, будут перерисованы? При любом вызове сеттера или только нужного? Как происходит определение какие из зависящих от стора компонентов надо перерисовывать? Через ключи в геттерах?

[strannik_k]

Провайдер контекста должен размещаться максимально близко к компонентам, потребляющим контекст. Это называется коллокацией (collocation) или размещением совместного состояния.

На первый взгляд кажется правильный утверждением. Но данные одной страницы со временем понадобятся в другой. То есть при усложнении приложения потребуется либо переносить провайдер контекста выше, либо передавать данные в контекст, который не меняется при переходе на другую страницу. Мой опыт показывает мне, что обычно контекст лучше располагать до компонента, отвечающего за роутинг.

Если "разнести" сеттеры, геттеры и экшены по отдельным файлам.

Не советую так делать, так как нарушается High Cohesion. В wiki хорошо написано, к каким проблемам это ведет. Как я уже неоднократно писал, в первую очередь стоит рассматривать разделение по функционалу, а только потом по типам. Если стараться применять это с принципом SRP, то со временем увидите, что:

1. функционал фильтрации примерно одинаков у всех сторов и его можно вынести отдельно, написав только одну реализация

2. Во многих случаях сторы отличаются в основном только данными, а большая часть их функций одинаковая. То есть общую часть можно вынести и добавлять при создании экземпляра стора.

То есть в простых случаях создание стора может быть таким:

const todosStore = createStore<ITodosState>();

а в более сложных таким:

function createMyStore<T>(initial: T) {(   
   state: initial,     
   feature1: createCommonFeauture1ForStore<T>(),
   feature2: createCommonFeauture2ForStore<T>(),   
}}; 

либо для средних проектов (но не для больших, т.к. смешивания приводит к багам из-за конфликтов имен):

function createMyStore<T>(initial: T) {(   
   state: initial,     
   ...createCommonFeauture1ForStore<T>(),
   ...createCommonFeauture2ForStore<T>(),   
}};