React + MobX - обновление без повторного рендеринга до состояния

Question

Я установил новый образец/шаблонный проект для тестирования с использованием Meteor с React & MobX (с использованием архитектуры Mantra). Проект находится в https://github.com/markoshust/mantra-matui-mobx

У меня возникла проблема, когда изменение состояния состояния State.header.title не отражает должным образом измененное изменение состояния при повторной визуализации.

Мое состояние строится втягивая простых объектов: https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/stores/route.js

в один мастер наблюдаемого объекта: https://github.com/markoshust/mantra-matui-mobx/blob/master/client/main.js#L8

Я Аукциона для изменения маршрута и вызова действия для обновления состояния: https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/reactions/route.js#L10

Это действие обновляет состояние: https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/actions/route.js#L5

Консоль выдает правильное изменение состояния, поэтому состояние обновляется должным образом. Однако компонент не перерисовывается с обновленным состоянием (эта строка - консоль. Log'ing old state val): https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/containers/Header.js#L6

Я вижу сообщение «update ...», поэтому компонент является повторной рендерингом, но, похоже, он все еще тянет в старом состоянии. Я добавил observer ко всем моим компонентам: https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/components/Header.js

Answer 1

Мне нужно было создать собственный композитор для MobX. Я добавил прослушивание автозапуска для повторной компоновки компонента.

https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/libs/with_mobx.js

import { compose } from 'mantra-core'; 
import { autorun } from 'mobx'; 

export default function composeWithMobx(fn, L, E, options) { 
    const onPropsChange = (props, onData) => { 
    const reactiveFn =() => fn(props, onData); 

    autorun(reactiveFn); 

    return reactiveFn(); 
    }; 

    return compose(onPropsChange, L, E, options); 
}