Local First avec React Native et Expo - 9. Utiliser un HOC pour rendre observable un composant

Mise en ligne : mercredi 16 octobre 2024

image de Local First avec React Native et Expo - 9. Utiliser un HOC pour rendre observable un composant}

Connecting components : Un HOC (composant d'ordre supérieur) pour rendre observable un composant.

1. Pourquoi faire ??

Dans l'état actuel de notre application, nous devons, pour mettre à jour notre UI :

  • fetch les données avec un useEffect
  • utiliser un useState pour mettre à jour notre UI

Grâce aux Connecting components, nous pourrons directement observer les changements dans notre base de données, et mettre à jour notre UI, en conséquence. Plus besoin de usState, de useEffect, ni de fetch, tout sera gérer, out of the box, par watermelonDB.

2. Un HOC avec withObservables

Nous importons withObservables :

src/components/ListPost.tsx
import { withObservables } from '@nozbe/watermelondb/react';

Nous créons un composant d'ordre supérieur (HOC), prenant en paramètre <ListPost /> et renvoyant un composant observable.

src/components/ListPost.tsx
const enhance = withObservables([], () => ({
	posts: getPosts(),
}));

Nous modifions ensuite la fonction getPosts, pour qu'elle ne soit plus asynchrone, mais nous permette d'observer les Posts.

src/database/functions.ts
export const getPosts = () => {
	const posts = database.get<Post>('posts').query().observe();
	return posts;
};

Enfin, nous pouvons supprimer le useState et le useEffect, car ils ne nous sont plus utiles, ainsi que la props posts dans ListPost :

src/app/index.tsx
// Reste de la page ...
<ListPost />

3. Conclusion

Nous n'avons fait qu'effleurer tout la puissance du pattern observable dans watermelonDB. Dans les prochains articles, nous poussons plus loin notre connaissance, tout en continuant de faire évoluer notre ToDo List, via des TP 😉.