React Functional Components

[AHillsie]

I wasn't able to find examples that use mobx in React functions so started researching and playing and eventually settled on this. It's based on the Egghead videos Michel posted.
What are the other ways to use Mobx in React functional components?

import * as React from 'react';
import { observable } from 'mobx';
import { observer } from 'mobx-react-lite';

interface StoreType {
    count: number;
    increment: () => void;
    decrement: () => void;
}

const countStore = observable<StoreType>({
    count: 0,
    increment: function() {
        this.count ++;
    },
    decrement: function() {
        this.count --;
    },
});

function CounterFunctionalComp(
    countStore: {
        countStore: { 
            count: number;
            increment: () => void;
            decrement: () => void;
       }
    }
){
    const onClick=(e:React.SyntheticEvent)=>{
        if (e.currentTarget.innerHTML === '+'){
            countStore.countStore.increment();
        }
        else{
            countStore.countStore.decrement();
        }
    }
    return (
        <div>
            <div>{countStore.countStore.count}</div>
            <button onClick={onClick}>+</button>
            <button onClick={onClick}>-</button>
        </div>
    );
};
const FunctionalCompObserver = observer(CounterFunctionalComp);
const  ReactFunkyComponent = () => <FunctionalCompObserver countStore={countStore} />

export default ReactFunkyComponent;

☝️

"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"mobx": "^6.5.0",
"mobx-react-lite": "^3.3.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"typescript": "^4.4.2",

[kubk]

Have you checked Mobx docs? https://mobx.js.org/README.html#a-quick-example

[AHillsie]

👍 Thanks
Yes, seen arrow function and classes examples, but wasn't able to find examples that use Functions.

Interesting example, though. Going to play with it some more.

[kubk]

@AHillsie You may also be interested in this simple todo demo built with Mobx and React functional components: https://github.com/kubk/react-mobx-starter

[codeBelt]

I will throw my example in here with MobX, React, and TypeScript.

https://github.com/codeBelt/mobx-local-global-stores

If you are using TypeScript I would suggest going with classes for your stores. I did all my stores with observable but ending changing them because you get better typing within TypeScript.

observable example

export const AboutPageStore = () => observable({
   // ...
});

export type AboutPageStore = ReturnType<typeof AboutPageStore>;

Class example

export class AboutPageStore {
  constructor() {
    makeAutoObservable(this);
  }

  // ...
}