2016-05-01 35 views
11

Utilizzo React, Redux da alcuni mesi. Una delle parti più confuse dell'ecosistema è il flusso di dati asincrono. Ci sono molte ottime soluzioni disponibili e la scelta della soluzione giusta per il tuo problema è la parte difficile.Quali sono le differenze tra Redux-Thunk e Redux-Promise quando usate con gli apis di Axios?

Nella mia applicazione, i creatori di azioni hanno principalmente chiamate asincrone axios [ajax] ai miei apis back-end. L'iniezione di Redux-Promise come middleware risolve il problema del flusso di dati asincrono.

Considerando l'app scalabile, potrei aver bisogno di concatenare più chiamate axios nel mio action maker. Penso di poter ancora utilizzare Redux-Promise come middleware e questo si occuperebbe del flusso di dati asincrono nella mia app.

In generale, la squadra è più incline all'utilizzo di Redux-Thunk, che mi sembra una sintassi più complicata per questo problema. Ho bisogno di suggerimenti per valutare questi 2 framework considerando che la maggior parte dei miei creatori di azioni stanno facendo solo chiamate (promesse) sugli assiomi. Ho visto una grande quantità di discussioni su Redux-thunk here. Ho capito come thunk può essere utile. . Ma ho bisogno di ulteriori chiarimenti per valutare Redux-Promise e Redux-Thunk insieme se usato solo per Promises. Quale middleware è migliore in questa situazione e perché? Quali vantaggi ottengo usando Redux-Thunk su Redux-Promise? O non c'è nessuno?

risposta

19

Redux Promise è utile per inviare tre azioni (richiesta, riuscita, errore) senza scrivere manualmente quel codice.

Redux Thunk è conveniente per il flusso di dati asincroni quando si esprime un creatore di azioni come in attesa di un altro creatore di azioni. Consente inoltre di leggere lo stato corrente per le spedizioni condizionali e i salvataggi iniziali.

È possibile utilizzarli insieme o utilizzare uno in particolare. Consiglierei di iniziare con Redux Thunk perché offre più controllo ed è più versatile. Dopo averlo fatto funzionare, puoi considerare aggiungendo Promessa Redux per rimuovere parte del codice boilerplate relativo alla distribuzione di tre tipi di azioni. Se trovi che non ti compra molto, rimuovilo. D'altra parte, se noti che tutti i creatori di azioni hanno appena inviato una sola promessa, puoi invece rimuovere Redux Thunk.

Se ciò non è ancora chiaro, è consigliabile utilizzare Redux Thunk finché non si è più a proprio agio con il funzionamento del middleware.

+1

Grazie per il chiarimento. Come hai detto, i creatori di azioni non fanno altro che inviare un'unica promessa finora e quindi Redux-Promise sembra una soluzione sufficiente. Ma quando parli di Redux-Thunk che offre più controllo, intendi che ti dà un modo per accedere allo stato e anche alle azioni di dispacciamento quando abbiamo bisogno? –

+0

@DishantSoni Sì, esattamente. –

+0

@DanAbramov puoi mostrare un esempio di rendering di alcuni dati nella pagina? Ho ed endpoint ma non riesco a farlo funzionare. Ecco un esempio di ciò che sto cercando di fare [link] (https://gist.github.com/anthonybrown/5d5d067718161a4a757c55329714be46) –