Привязать компонент к наблюдаемому примитивному значению в штучной упаковке

Что я хочу?

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

Используя лодаш,

type BusinessData = { root: { path: { value: string } };

@observable state = buildInitialState();

const buildInitialState = () : BusinessData => {root: {}};

<BindedComponent value = {_.get(state, 'root.path.value')} />

const fetchState = () : BusinessData => { root: { path: { value: 'potato' } } };

В чем проблема?

На момент первого рендеринга приложения root.path равно undefined. Он будет извлечен позже на каком-то этапе жизненного цикла какого-либо внутреннего компонента или при действии пользователя. Кроме того, он может даже не быть получен с сервера. Такой путь может отсутствовать в данных, пока пользователь не отредактирует какой-либо ввод, и это значение не будет установлено.

Возможное решение - явно инициализировать все состояние:

const buildInitialState = () : BusinessData => { root: { path: { value:  undefined } } };

Затем BindedComponent можно привязывать к коробочному undefined и наблюдать за изменениями. Это плохо, потому что когда состояние глубоко вложено, мне приходится писать такой шаблон. А также в моем случае форма бизнес-данных может иметь множество реализаций. Поэтому я должен явно инициализировать каждый из них во всех моих проектах.

Любые идеи о том, как я могу решить это без шаблона?


reactjs mobx mobx-react
person idementia    schedule 23.08.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Старайтесь, чтобы структура вашего состояния была простой:

@observable state = { root: { path: { value: null } }

Затем вы можете создать простую функцию обновления:

async setStateValue(value) {
      try {
       this.state.root.path.value = await value
      } catch (e) {
       console.log(e)
   }
}

Вызов этого на этапе рендеринга автоматически обновит ваш компонент после того, как обещание будет выполнено:

async updateFromComponent() {
      await setStateValue('potato')
 }

const {value} = prop.store.state.root.path
render (){
    return (
    <BindedComponent value = {value} />
)
}
person Jason Mullings    schedule 27.08.2018