Как разделить хранилище Mobx-State-Tree между компонентами, используя React Context - PullRequest
Новая
       30

Как разделить хранилище Mobx-State-Tree между компонентами, используя React Context

0 голосов
/ 27 июня 2019

В настоящее время я использую Mobx-State-Tree для управления всем состоянием формы в моем приложении React.Проблема, с которой я сталкиваюсь, заключается в том, что я хочу создать хранилище на уровне страницы, следуя атомарному дизайну, формы и передать хранилище необходимым компонентам через контекст React, но я хочу избежать включения моего дочернего компонента в <Observer> тегов от Mobx-react, или у меня на ребенке есть какая-то специальная обертка, которая потребляет магазин и передает его в качестве опоры ребенку.

Должна ли быть лучшая практика в этом отношении?Документация Mobx-react гласит:

" Можно прочитать хранилища, предоставленные Provider, используя React.useContext, используя контекст MobXProviderContext, который можно импортировать из mobx-react. "

Но тогда я не могу найти каких-либо примеров или объяснений того, как лучше всего реализовать MobXProviderContext?Моя текущая настройка выглядит следующим образом (очень упрощенно, чтобы продемонстрировать ситуацию): 

import { types } from "mobx-state-tree";

const ExampleContext = React.createContext("default");

const exampleStore = types.model({ prop: types.optional(types.string, "") }).create();

const ChildComponent = () => (
  <ExampleContext.Consumer>
    {example => <Observer>{() => <div>{example.prop}</div>}</Observer>}
  </ExampleContext.Consumer>
);

const ParentComponent = () => (
<ExampleContext.Provider value={exampleStore}>
   <ChildComponent />
</ExampleContext.Provider>
);

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

Надеюсь, чтоимеет смысл и очень ценю любые советы о том, как лучше всего к этому подойти!

...