Gli osservabili sono spesso utilizzati in combinazione con altre librerie o pattern di gestione dello stato come Redux o MobX in un’applicazione React. Diamo un’occhiata a come si potrebbe utilizzare un osservabile in React con MobX.
1. Installazione: MobX è una libreria che facilita l’uso degli osservabili. Per installarlo, apri la tua linea di comando e inserisci:
npm install mobx —save npm install mobx-react —save1. Creazione dello Store: Prima di tutto, dovresti creare uno store. Pensalo come un luogo centrale in cui vengono conservati tutti i dati dell’applicazione.
import {observable} from ‘mobx’; class Store { @observable counter = 0; increment = () => { this.counter++; } decrement = () => { this.counter—; } } export default new Store();1. Uso dello Store con React: Ora puoi utilizzare lo store con React. MobX offre un provider, che ti permette di passare lo store come un prop a tutti i tuoi componenti.
import React from ‘react’; import {Provider} from ‘mobx-react’; import Store from ‘./Store’; import Counter from ‘./Counter’; const App = () => (1. Utilizzo del decoratore observer: Per far sì che un componente reagisca ai cambiamenti negli osservabili, devi avvolgerlo con il decoratore observer.
import React from ‘react’; import {observer, inject} from ‘mobx-react’;inject('store')
observer
class Counter extends React.Component {
render() {
const {store} = this.props;
return (
In questo esempio, quando il valore di “counter” nello store cambia, il componente Counter viene re-renderizzato con il nuovo valore. La funzione observer di MobX si occupa di tutto l’aspetto di reazione e rendering del componente.
Ricorda, gli Osservabili sono solo uno degli strumenti che hai a disposizione per gestire lo stato in React, e dovrebbero essere utilizzati quando sei a tuo agio con lo stato di React e vuoi sperimentare modi più avanzati o più efficienti per gestire lo stato su larga scala.
