Mobx component not re-rendering on change in observable value

Question

I am creating a React application and using Mobx for state management. Here is my code:

Store:

import { observable, action } from 'mobx';

class UnlockApp {

    @observable unlockPoints = 9;
    @observable pattern = null;
    @observable patternInProgress = false;
    @observable lastPoint = null;
    @observable allNodes = null;
    @observable lastNode = null;
    @observable currentX = null;
    @observable currentY = null;
    @observable isPatternLineEmpty = true;

    @action onPointPress = (point) => {
        this.pattern = [];
        this.pattern.push(point);
        this.patternInProgress = true;
        this.lastPoint = point;
        this.isPatternLineEmpty = false;
    }

    @action drawLine = (currentX, currentY) => {
        if (this.patternInProgress) {
            this.lastNode = this.allNodes[this.lastPoint].current;
            this.currentX = currentX;
            this.currentY = currentY;
        }
    }

    @action handleMouseEnter = (point) => {
        if (this.patternInProgress) {
            this.pattern.push(point);
            this.lastPoint = point;
            this.isPatternLineEmpty = false;
        }
    }

    @action stopCounting = () => {
        this.patternInProgress = false;
        this.lastPoint = null;
    }

    @action updateNodes = (nodes) => {
        this.allNodes = nodes;
    }

}

export default new UnlockApp();

Component:

import React from 'react';
import ReactDOM from 'react-dom';
import { observer } from 'mobx-react';
import PatternLine from './components/pattern-line/pattern-line';
import PatternScreen from './components/pattern-screen/pattern-screen';
import UnlockApp from './store';

const App = observer(() => {
    console.log(UnlockApp.currentX);
    return (
        <div>
            <PatternScreen store={UnlockApp} />
            {
                UnlockApp.patternInProgress &&
                <PatternLine lastNode={UnlockApp.lastNode}
                    currentX={UnlockApp.currentX}
                    currentY={UnlockApp.currentY} />
            }
        </div>
    )
})

There are two issue:

1) If I remove console.log(UnlockApp.currentX) from App component, App no longer re-renders when currentX changes. Why is this happening? I am already using currentX as a prop value inside App , so should it not automatically re-render?

2) Whenever I press down the mouse and onPointPress gets called, it successfully updates patternInProgress to true . As patternInProgress is an observable and being used inside the render method of the component App , App re-renders when patternInProgress changes to true inside onPointPress method. This causes the re-render of PatternLine component also (which is desired).

However, the issue is that the props that are being passed to PatternLine are not being updated ( null is passed instead). ie the drawLine method is not successfully updating lastNode , currentX and currentY inside the store.

I can't figure out why this is happening. What am I doing wrong here? Please note that I have not shown the code of the component that calls drwaLine method. However, I have already tested that the calling component correctly passes currentX and currentY to drwaLine .

Answer 1

Your code has a typo. You're importing PatterLine when it should say PatternLine .