Inizia con Redux Thunk

Stato è una parte importante di un'applicazione reagire, motivo per cui Redux è comunemente accoppiata con esso. Che i dati vengono spesso da un database, che richiede una richiesta e una risposta. Per alcune applicazioni, questa comunicazione può essere costante. Può essere difficile cercare di gestire esclusivamente all'interno dei componenti reagire.

Questo introduce anche alcuni nuovi problemi - cosa succede se carichi lentamente, o non carica affatto? Ogni componente che si occupa dei dati asincroni dovrebbe contenere la logica per gestire questi scenari.

Un 'Thunk' è un concetto che può aiutare con questa situazione. Ogni Thunk è una funzione che restituisce un'altra funzione. Quella funzione può quindi essere chiamata in un punto successivo, molto simile a un richiamo. Se potessimo spedire un thunk invece di un oggetto azione, possiamo aggiungere una logica in più in reazione a un altro evento.

Redux Thunk è una biblioteca che si trova tra azioni spedite e il riduttore. Quando vede un thunk viene spedito, passa alcuni metodi nella funzione restituita che può essere utilizzata per inviare ulteriori azioni, come un successo o un evento di errore.

• 20 plugin jquery brillanti

In questo tutorial, faremo uso dei thunk per aiutare a tirare i dati da un server piuttosto che da un file JSON, funzionante con Photoshare. - Un'applicazione di foto-commentabile alimentata da Redux.

Hai un nuovo progetto del sito, ma ne ho bisogno per rimanere semplice? Ecco le nostre guide al meglio Builder del sito web e web hosting servizio. Condividere i file con gli altri? Prendi il tuo deposito cloud. giusto.

Scarica i file. per questo tutorial.

01. Installa dipendenze

Esistono due parti a questo progetto - il sito front-end e il server back-end che si esaurisce. Mentre il tutorial si concentra sulla parte anteriore, abbiamo bisogno di un server in esecuzione per recuperare le foto. Scarica i file del progetto e installa le dipendenze sia per il sito che per il server. Esegui i server per entrambi e lasciarli in esecuzione sullo sfondo.

 / * Un terminale interno / sito * /
& GT; filato
& GT; inizio del filo
/ * Un terminale interno / server * /
& GT; filato
& GT; Inizio del filo 

02. Configura il middleware

Redux Thunk è un middleware - Funzionalità che si trova tra azioni e riduttori che possono cambiare in che modo tali azioni si comportano. Redux supporta più set di middleware che coprono l'intera applicazione. Vengono aggiunti quando il negozio è stato creato usando il comporre metodo. Aggiungi middleware al creatore Metodo all'interno dell'indice.js.

 Importa {applymiddleware, composte}
da "Redux";
importare il tuunk da "redux-thunk";
[...]
Const Store = creatore (
rootinducer,
comporre(
applymiddleware (Thunk),
Devtools.
)
); 

03. Imposta i creatori di azione

La prima cosa che dobbiamo fare ora è caricare le foto nella galleria. Come le azioni regolari, abbiamo bisogno di creatori d'azione per i vari stati che prenderanno una chiamata asincrona. La maggior parte avrà inizio , successo e errore Azioni. Questi lasciano Redux sapere cosa sta facendo il JavaScript. Entro Azioni / foto / foto.js , allestire tre creatori di azione per questi diversi stati.

 Esporta Cost LoadGalleryStart = () = & GT; ({
Tipo: Load_Gallery_Start});
Esporta Const LoadGallerySuccess =
Foto = & GT; ({
Tipo: load_gallery_success,
fotografie
}););
Esporta Cost LoadGalleryError = () = & GT; ({
Tipo: load_gallery_error}); 

04. Crea un thunk per il caricamento

I thunks lavorano esattamente come gli action creatori. Spediamo ancora il valore di ritorno, ma questa volta restituisce una funzione invece di un oggetto. Il middleware che abbiamo impostato in precedenza passerà un metodo di spedizione nella funzione restituita. Ciò ci consente di inviare ulteriori azioni a Redux dopo la spedizione iniziale. Creare un Loadgallery. Metodo che restituisce una funzione. Per ora, inviare un'azione per dimostrare che la Galleria sta ancora caricando.

 Esporta Cost LoadGallery = () = & GT;
Spedizione = & GT; {
Spedizione (LoadGalleryStart ());
}; 

05. Carica i dati dal server

Ora siamo pronti per iniziare il recupero dal server che abbiamo impostato all'inizio. Possiamo farlo usando assios. - Un pacchetto progettato per funzionare con promesse in diversi browser. Importare assios. e fare una richiesta per le foto all'interno Loadgallery. . Se la promessa si risolve, spedire l'azione di successo e inviare l'azione di errore. Con ciò, la struttura del Thunk è completa.

 Importa Axios da "Axios";
[...]
ritorno assios.
.get ("http: // localhost: 3001 / foto")
.then (risposta = & gt; spedizione (
LoadGallerySuccess (Risposta.Data)))
.CATCH (() = & GT; spedizione (
LoadGalleryError ())); 

06. Invio del thunk

Il Thunk non farà nulla finché non viene spedito. Possiamo farlo all'interno di un componente reagire come qualsiasi altra azione. Un buon momento per iniziare a caricare le foto è quando l'utente visualizza la galleria principale. Possiamo usare React's componentidmount. Metodo di ciclo di vita come trigger, dopo aver controllato la Galleria non è già stato caricato. Entro Componenti / Contenitore / Galleria / Galleria.js spedire a. Loadgallery. azione aggiungerla a MapDispatchtopoprops. e chiamandolo dentro componentidmount. .

 ComponentDidmount () {
Se (! This.props.photosloaded) {
This.Props.LoadGallery ();
}
}
Esporta Const MapDispatchTatchPropls =
 Spedizione = & GT; ({
LoadGallery: () = & GT;
Dispatch (LoadGallery ()),
}); 

07. Aggiungi foto su successo

Quando le foto tornano dal server ,viamo A Carical_gallery_success. azione con le foto. Dobbiamo ottenere questo nello stato attraverso il fotografie Riduttore. Testa a. Riduttori / foto / foto.js e aggiungere un caso per l'azione di successo. Il carico utile contiene tutte le foto come un array. Una volta aggiornato lo stato, il selettore fotografico passa le foto fino al componente della Galleria da visualizzare.

 Caso Load_Gallery_Success:
Restituisce Azione.photos; 

08. Imposta l'interfaccia utente

Attualmente, le foto appaiono improvvisamente dopo che sono state caricate. Su una connessione più lenta, l'utente guarderà uno schermo vuoto fino a quando la richiesta finisca, se lo fa mai. Le azioni che inviamo alle foto di caricamento possono anche essere raccolte nel riduttore dell'interfaccia utente per mantenere aggiornata l'interfaccia con quello che sta accadendo. Aggiorna i flag di caricamento e errore all'interno del riduttore UI a Riduttori / UI / UI.JS .

 Caso Load_Gallery_Error:
ritorno {... stato,
Caricamento: falso, errore: true};
Case Load_Gallery_Start:
ritorno {... stato,
Caricamento: vero, errore: falso};
Case Load_Gallery_Success:
ritorno {... stato,
Caricamento: falso}; 

09. Aggiungi caricamento e selettore di errore

Come con le foto della galleria stessa, abbiamo bisogno di selettori per ottenere i valori dei vari stati degli interfacciature da Redux. Possiamo passarli alla galleria, che rendano quindi elementi diversi se uno è vero. Nel Selettori / UI / UI.JS , aggiungi un paio di funzioni per ottenere i valori.

 Esporta Cost ISGALLERYERRORED =
 stato = & gt; stato.ui.error;
Esporta cost isgalleryloading =
 stato = & gt; stato.ui.loading; 

10. Aggiungi dati alla galleriacontainer

Con i selettori pronti, ora possono essere aggiunti al Galleria Componente del contenitore. Aggiungendoli qui significa che il componente responsabile della visualizzazione della Galleria non è necessario sapere su come i dati sono arrivati. Testa a. Container / Gallery / Gallery.js e aggiungi i selettori a Mapstatetopops. . Fai costanti per i valori per aiutare a visualizzare lo stato nel passaggio successivo.

 Const {Errore, caricamento,
 Foto} = This.Props;
[...]
Esporta Const Mapstatetopops =
 stato = & gt; ({
Errore: isgalleryerrored (stato),
Caricamento: isgalleryloading (stato),
 }); 

11. Mostra lo stato di caricamento e errore

Mentre abbiamo gli errori e il caricamento di oggetti di scena, al momento non esiste un'interfaccia utente per indicare quando sono attivi. Questi oggetti di scena sono valori booleani, il che significa che possiamo alternare la visualizzazione dei componenti quando sono vere. Aggiorna il metodo di rendering per assicurarsi che il & lt; errori & gt; e & lt; loading & gt; I componenti rendono invece della galleria quando necessario.

 IF (ERRORE) {
ritorno e lt; errore / & gt ;;
}
Se (caricamento) {
ritorno e lt; caricamento / & GT ;;
} 

12. Prendi di nuovo la Galleria

Con la galleria caricata, possiamo passare a una singola foto. Cliccando in una qualsiasi delle foto e aggiornare la pagina non carica il backup della foto, poiché non ci sono ancora istruzioni su questa pagina per caricare la Galleria. Aperto contenitore / foto / foto.js e caricare la galleria in componentidmount. Come nel. Galleria componente. Il Photosloaded. Il controllo non tenterà di caricare di nuovo le foto se fossero già caricati all'interno della Galleria.

 IF (! This.Props.photosOlloded) {
This.Props.LoadGallery ();
} 

13. Aggiungi un nuovo commento

L'utente può cliccare sulla foto in cui vogliono lasciare un commento. La componente di presentazione fotografica eseguirà il addnewcomment. Funzione di Prop quando ciò accade. Dentro il addnewcomment. Funzione, calcola il punto in cui l'utente ha cliccato nella foto. Il server richiede un valore percentuale intero tondo quando viene salvato.

 Const Photo = E.target
 .getboundingclientrect ();
cost top = e.clientx - photo.left;
cost sinistra = e.clienty - photo.top;
Const Toppc = Math.Round ((Top /
 photo.width) * 100);
Const LeftPC = Math.Round ((a sinistra /
 photo.Height) * 100); 

14. Dillo a Redux sul commento

Con la posizione calcolata, abbiamo quindi bisogno di dire a Redux sul commento in modo che possa visualizzare il modulo di commento. C'è già un'azione impostata per aggiungere il nuovo commento sullo schermo. Inserisci addnewcomment. in MapDispatchtopoprops. E chiamalo dopo aver calcolato la posizione del clic.

 This.Props.AddnewComment (
 toppc, leftpc);
[...]
Esporta Const MapDispatchTatchPropls =
 Spedizione = & GT; ({
AddNewcomment: (in alto, a sinistra) = & gt;
Spedizione (addnewcomment (Top, a sinistra)),
}););

15. Dillo a una foto sul nuovo commento

Quando le nuove informazioni sui commenti vengono passate a Redux, dobbiamo passarla nel componente di presentazione fotografica. Ciò consente di mostrare il modulo in quella posizione. Trovare il GetNewcomment. selettore, aggiungilo a Mapstatetopops. e passa il Prop in & lt; Foto & GT; .

 Esporta Const Mapstatetopops =
 (stato, puntelli) = & gt; ({
Comprensent: GetNewComment (Stato),
}););
& lt; foto [...] newcomment = {
 this.props.newcomment} / & gt; 

16. Chiama Thunk in commento

Cliccando sulla foto ora porterà il nuovo modulo di commento. Questo è il suo componente collegato. Quando viene inviato il modulo, chiama A invia commento funzione di Prop e viene passata. Questo è un thunk che faremo. Aprire contenitore / nuovocomment / newcomment.js e aggiungi il thunk a MapDispatchtopoprops. . Passare che Prop nel componente presentazione reso.

 & lt; Newcomment [...]
 INVIOCOMMENTO = {INVIACCIO} / & GT;
Esporta Const MapDispatchTatchPropls =
 Spedizione = & GT; ({
Informazione: commento = & gt; spedizione(
Informatica (commento))
}););

17. Raccogli il contenuto per il thunk

Il Thunk per aggiungere un nuovo commento ha una struttura simile al recupero della galleria, tra cui un avvio, successo e azione di errore. C'è una discussione in più passata in questo thunk - il gettista funzione. Ciò consente l'accesso diretto allo stato attuale al fine di afferrare i dati da esso. Crea il invia commento THUNG IN. Azioni / NewComment / Newcomment.js . Ogni commento è associato a una foto e un utente. Per questo tutorial, l'ID utente è codificato in modo difficile nel utente Riduttore.

Esporta Const SuttopComment = Commento
 = & GT; (Spedizione, GettState) = & GT; {
Spedizione (INVIOCOMMENTSTART ());
Const CurrentPhotoid =.
getcurrentPhotoid (GetState ());
utente cost =.
getcurrentUser (GetState ());
const {sinistra, top} =
GetNewcomment (GetState ());
}; 

18. Pubblica la richiesta

Con tutti i dati necessari in atto, possiamo inviare il commento. Axios ha A. inviare Metodo per affrontare INVIARE Le richieste, con il secondo argomento sono i dati per inviare tale richiesta. Aggiungere la richiesta al Thunk, passando in dati in caso di serpente per abbinare ciò che il server si aspetta.

 Ritorno Axios
.inviare(
"http: // localhost: 3001 / commenti", {
user_id: user.id,
Photo_ID: CurrentPhotoid,
commento,
sinistra,
superiore
}) 

19. Gestire il successo ed errore

Se la promessa di Axios risolve o rifiuta, dobbiamo dire alla domanda a riguardo. Se si risolve con successo, il server passerà il contenuto del commento. Dovremmo passarlo con l'azione di successo. Se viene rifiutato, spara un'azione di errore. Aggiorna la promessa con poi e catturare Blocchi.

 .then (({Dati: {
 ID, commento, sinistra, top}}) = & gt;
spedizione(
INVIOCOMMENTUCCESCESS (
ID, commento, a sinistra, in alto,
Utente, CurrentPhotoid)
)
)
.CATCH (() = & GT; spedizione (
 INVESSECOMMENTIERROR ())); 

20. Aggiungi commento alla foto

In questo momento, una volta aggiunto il commento con successo viene cancellato dallo schermo ma non è visibile fino a quando la pagina si aggiorna. Possiamo aggiornare il riduttore delle foto per ritirare il nuovo commento e aggiungerlo alla sua serie di commenti, per mostrare come il resto di loro. Aprire il riduttore / foto / foto.js e aggiungi un caso per gestire l'azione. Creare una copia dello stato per assicurarti che non mutassimo accidentalmente lo stato esistente.

 Caso submit_comment_success:
const {id, comment, top, a sinistra,
utente, fotoid} = azione.payload;
Cost NewState = JSON.PARESE (
Json.Stringify (stato));
fotografica const = newstate.find (
Foto = & GT; photo.id === Photoid);
photo.Comments.push ({
ID, commento, a sinistra, in alto, utente
}););
Ritorna NewState; 

21. Nascondi altri commenti

Infine, se un altro commento è aperto e l'utente vuole aggiungere un nuovo commento, l'UI diventa troppo ingombrante. Dovremmo nascondere la casella dei commenti se viene composto un nuovo commento. Possiamo agganciare all'esistente Add_new_comment. azione per cancellare il CommentOpen. valore. Testa a. Riduttore / ui / ui.js e aggiungere un caso per quello.

 Case add_new_comment:
ritorno {
...stato,
CommentOpen: indefinito
}; 

Questo articolo è stato originariamente pubblicato in questione 283 di creative Web Design Magazine Web designer . Comprare il problema 283 qui o Iscriviti al web designer qui .

Articoli Correlati:

• 5 fantastiche API JavaScript
• Sviluppare componenti reagibili riutilizzabili
• 9 dei migliori framework JavaScript