Nel mio precedente articolo " Comprendere i riduttori da zero " ho introdotto il concetto di riduttori e l'ho ampliato per creare una semplice architettura applicativa simile a Redux in sole 50 righe di codice.

Comprendere i riduttori da zero

Oggi scriverò di Redux, una popolare libreria Javascript che ha reso popolare il modello di progettazione Reducer e che è diventata una delle architetture applicative più utilizzate oggi (2018).

Redux si è autoproclamato contenitore di stati prevedibili per le applicazioni Javascript . Ma Redux non aiuta solo nella gestione dello stato. Inoltre, semplifica l'implementazione di funzionalità avanzate, come l'aggiunta di operazioni di annullamento/ripristino, registrazione/riproduzione, modifica dal vivo e coordinamento multiutente alle tue applicazioni.

Ciò che rende Redux eccezionale è che ci costringe a pensare in un certo modo. Iniziamo subito a pensare allo stato dell'applicazione.

I tre principi fondamentali di un pattern Redux:

1. State Tree è un'unica fonte di verità. Lo stato dell'intera applicazione è rappresentato da un oggetto Javascript, ovvero l' albero degli stati
2. L'albero degli stati è di sola lettura. L'oggetto stato non può essere manipolato direttamente. Lo stato viene aggiornato inviando oggetti azione .
3. Le modifiche vengono apportate con funzioni pure. L'unico modo in cui uno stato muterà è con una pura funzione riduttore. Il riduttore prende lo stato corrente e l'oggetto dell'azione inviato; e restituisce uno stato mutato, che è lo stato successivo dell'applicazione.

Nell'esempio seguente, ho impostato un semplice widget per dimostrare il funzionamento interno del meccanismo di gestione dello stato di Redux .

Il widget ha una casella quadrata, dove viene visualizzato il contatore dello stato. Inoltre, i pulsanti “+ aumenta” e “- diminuisci” per aumentare o diminuire il contatore mantenuto in stato. Lo stato è un numero di contatore, che inizialmente è 0.

Ecco i passaggi che ho seguito per creare il widget.

Passaggio 1 : creare la funzione riduttore , che è responsabile della mutazione di uno stato in base all'oggetto azione inviato [Riga 3].

L'oggetto azione è un oggetto semplice con un attributo type . Il riduttore lo controllerà ed eseguirà la mutazione di stato appropriata [Linea 7 e 11].

Passaggio 2 : creare una funzione di rendering [Riga 20], che recupererà un contatore di stato dal negozio [Riga 22] e lo popolerà nella casella quadrata [Riga 25]. Il contatore di stato sarà il risultato della funzione di riduzione del passaggio 1 .

Passaggio 3 , creare un negozio Redux e associare la funzione riduttore . [Riga 30].

Passaggio 4 : iscrivi la funzione di rendering a un negozio . [Riga 33]

Abbiamo associato le funzioni di riduzione e rendering allo store. Ora l' oggetto azione fluirà nel riduttore e quindi uno stato mutato fluirà nella funzione di rendering .

Passaggio 5 : crea tutti gli oggetti visivi, aggiungili al corpo del documento e imposta l'aumento e la diminuzione degli eventi di clic [Riga 56].

Passaggio 6 : ora, ogni evento clic invierà un oggetto azione nel negozio [Riga 57 e 61].

Ecco un diagramma più dettagliato di ciò che accade in questa piccola applicazione

Inoltre, puoi giocare con un campione su JSFiddle. Fare clic sulla scheda Risultato .

In conclusione, Redux è una libreria molto semplice e utile che ci aiuta a organizzare il flusso dello stato della nostra applicazione. E tutto quello che dovevamo fare era creare funzioni di riduzione e rendering ; e associarli a un negozio .

Dai un'occhiata al mio framework open source QQ:

https://github.com/jsmuster/qq

Dai un'occhiata ai miei altri articoli

Fantastiche funzionalità di ES6 tramite esempio Esplorazione di React con Javascript vanilla - parte 1 Esame degli iteratori... di Javascript