React + MobX - not re-rendering update to state

Question

I've setup a new sample/boilerplate project for testing out using Meteor with React & MobX (using Mantra architecture). The project is at https://github.com/markoshust/mantra-matui-mobx

I'm having an issue where the state change of the State.header.title property is not properly reflecting the updated state change on re-render.

My state is built by pulling in simple objects: https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/stores/route.js

Into one master observable object: https://github.com/markoshust/mantra-matui-mobx/blob/master/client/main.js#L8

I'm listing for route change and calling an action to update state: https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/reactions/route.js#L10

This action updates state: https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/actions/route.js#L5

The console is logging out proper state change, so the state is being updated properly. However, the component is not being re-rendered with the updated state (this line is console.log'ing old state val): https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/containers/Header.js#L6

I'm seeing the 'updating...' message, so the component is re-rendering, but it appears to still be pulling in the old state. I did add observer to all of my react components: https://github.com/markoshust/mantra-matui-mobx/blob/master/client/modules/core/components/Header.js

Answer 1

I needed to create a custom composer for MobX. I added a listen for autorun to re-compose the component.

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);
}