Bonjour !

Cet article fait suite à l’article de présentation sur Mobx. Aujourd’hui, je vous propose de poursuivre la découverte de MobX et cette fois-ci avec React, en vous présentant une architecture de state se basant sur la context API de manière très similaire à ce que l’on avait pu mettre en place dans cet article.

Installation

Pour installer MobX, rien de plus simple :

> npm install --save-dev mobx mobx-react-lite

Création du store

Construisons tout d’abord notre store MobX :

export class MobxTodoStore  {

    @observable items: string[] = [];

    @action addItem(item:  string)  {
	    this.items.push(item);
    }

    @action removeItem(item: string)  {
	    if (this.items.includes(item)) {
		    this.items = this.items.filter((i)  => i !== item);
	    }
    }

    @computed get listLength()  {
	    return  this.items.length;
    }
}

Ici, nous avons un exemple simple de store qui stocke des items de type string. Pour profiter de l’intérêt principal de MobX qui est de traquer les changements de valeurs, nous marquons notre variable items comme étant un observable. Nous avons ensuite les actions associées qui vont nous permettre d’ajouter ou de supprimer des éléments de notre liste. Enfin, nous avons une valeur auto-calculée computed qui nous retourne la taille de notre liste d’items.

Une fois notre store créé, nous allons l’instancier et le placer dans un context React que nous allons également créer :

const contextValue = {
	todosStore: new MobxTodoStore(),
};

export const AppContext = React.createContext(contextValue);

export const useStores = () => {
	return useContext(AppContext);
};

Notez ici simplement qu’au lieu de passer directement le store instancié comme valeur du context, nous passons un object avec pour clé le store instancié. Ce n’est pas très pertinent ici puisque nous n'en avons qu’un seul, mais cela montre que vous pouvez avoir un store pour chaque type de contexte de données à la manière d’un combineReducer de Redux (dans notre cas nous n’avons que todos).

Utilisation du context

Voici notre composant qui va consommer et modifier notre store :

const List = observer(() => {
	const { todosStore } = useStores();

	const handleAddItem = useCallback(() => {
		todosStore.addItem("new value !");
	}, []);

	return (
		<>
			<button onClick={handleAddItem}>Add</button>
			{todosStore.listLength > 0 && (
				<ul>
					{todosStore.items.map((item: string) => (
						<li>{item}</li>
					))}
				</ul>
			)}
		</>
	);
});

L’élément principal à noter ici est l’utilisation de la fonction observer qui encapsule notre composant. observer et permet au composant React de s’abonner automatiquement à tous les observables qui sont utilisés dans la fonction render. Ce qui signifie que lorsque l’un de ces observables changera, le composant déclenchera automatiquement un nouveau rendu.

En plus de rendre nos composants React réactifs aux changements de nos stores, l'avantage est aussi de permettre à nos composants de rendre uniquement lorsque des changements de valeurs significatifs ont eu lieu. Ainsi MobX indique dans sa documentation que les applications utilisant MobX sont plus optimisées que des applications React sans librairies de state management ou des applications utilisant Redux.

Vous noterez également que nous n’avons pas eu besoin d’utiliser un provider de context tel que <AppContext.Provider>. Cela vient du fait que <AppContext.Provider> permet aux composants consumers de s’abonner aux changements du context. Or ici, nous passons directement par MobX pour nous signaler des changements et rendre automatiquement nos composants. <AppContext.Provider> est donc inutile ici.

Et voilà pour cette petite présentation de MobX. Le but de ces articles était de présenter simplement MobX, d’en comprendre les concepts et d’avoir une base pour pouvoir commencer à l’utiliser. Ces articles n’ont évidemment pas couvert tout ce que MobX a à offrir. Pour voir le reste, la documentation se trouve ici.

D’un point de vue personnel, je dois admettre que MobX fut l’une des meilleures découvertes que j’ai pu faire cette année en matière de technos. MobX est clairement ce que je connais aujourd’hui de plus abouti en termes de state management sur React, alliant simplicité, efficacité, performance et clarté de la syntaxe, tout en profitant du meilleur de la context API de React.

Si vous avez la possibilité prochainement d’utiliser MobX dans vos projets, je ne peux que vous le conseiller !

Happy coding !