Реакция - зацепки + контекст - это хороший способ управления глобальным состоянием? - PullRequest
Новая
       60

Реакция - зацепки + контекст - это хороший способ управления глобальным состоянием?

1 голос
/ 10 апреля 2019

Я пытаюсь найти хороший, чистый, с небольшим образцом, способ справиться с глобальным состоянием React

Идея состоит в том, чтобы иметь HOC, используя преимущества новых крючков React& Context API, который возвращает поставщика контекста со значением, связанным с его состоянием.Я использую rxjs для запуска обновления состояния при изменении хранилища.

Я также экспортирую еще несколько объектов из своего хранилища (в частности: необработанный объект-субъект rxjs и прокси-сервер хранилища, который всегда возвращает последнее значение).

Это работает.Когда я что-то изменяю в своем глобальном магазине, я получаю обновления в любом месте приложения (будь то компонент React или вне React).Однако, чтобы достичь этого, компонент HOC повторно выполняет рендеринг.

Это не работает?

Кусок кода / логики, который я считаю проблематичным,компонент HOC: 

const Provider = ({ children }) => {
    const [store, setStore] = useState(GlobalStore.value)

    useEffect(() => {
        GlobalStore.subscribe(setStore)
    }, [])

    return <Context.Provider value={store}>{children}</Context.Provider>
}

GlobalStore - это rxjs BehaviorSubject.Каждый раз, когда тема обновляется, состояние компонента Provider обновляется, что вызывает повторную визуализацию.

Здесь доступна полная демонстрация: https://codesandbox.io/s/qzkqrm698q

Реальный вопрос: Разве это не плохой способ управления глобальным государством?Я чувствую, что это может быть из-за того, что я в основном перерисовываю все при обновлении состояния ...

EDIT : я думаю, что я написал более производительную версию, которая не такая легкая (зависитна MobX), но я думаю, что это создает намного меньше накладных расходов (демонстрация на: https://codesandbox.io/s/7oxko37rq) - Теперь было бы здорово иметь тот же конечный результат, но отбрасывать MobX - Вопрос больше не имеет смысла

1 Ответ

0 голосов
/ 10 апреля 2019

GlobalStore тема избыточна. RxJS observables и React context API реализуют шаблон pub-sub, поэтому их совместное использование не дает никаких преимуществ. Если GlobalStore.subscribe предполагается использовать у детей для обновления состояния, это приведет к ненужной жесткой связи.

Обновление состояния глюкала новым объектом приведет к повторной визуализации всей иерархии компонентов. Распространенный способ избежать проблем с производительностью у детей - это выбрать необходимые части состояния и сделать их чистыми компонентами для предотвращения ненужных обновлений: 

<Context.Consumer>
  ({ foo: { bar }, setState }) => <PureFoo bar={bar} setState={setState}/>
</Context.Provider>

PureFoo не будет повторно отображаться при обновлении состояния, если bar и setState совпадают.

...