Dans Réagir avec Redux, quand devrais-je enregistrer les données à back end

Question

Dans Réagir avec Redux, quand il y a des opérations utilisateur, par exemple, dans facebook, l'utilisateur ajoute quelques commentaires, j'appellerai dispatch() pour envoyer l'action add to redux store , mais quand dois-je rappeler l'API de fin pour enregistrer ces données dans la base de données? Dois-je le faire avec dispatch()?

grâce

Answer 1

Une solution serait de transférer votre logique de l'API dans un thunk en utilisant un logiciel de middleware tels redux-thunk (ou similaire). L'utilisation de thunks vous permet de traiter des types spéciaux de actions comme des fonctions, ce qui signifie que vous pouvez étendre une action simple avec une logique spécifique liée à l'action. L'exemple que vous donnez de devoir sérialiser votre état est un excellent exemple d'utilisation de redux-thunk.

Vous remarquerez que, contrairement aux réducteurs, les thunks prennent explicitement en charge l'état de récupération et l'envoi des actions suivantes via les fonctions getState et dispatch. Vous trouverez ci-dessous un exemple ES6 de ce que pourrait être un tel thème multifonctionnel.

Pour démontrer la méthode getState(), le nouvel élément ne sera sauvegardé via l'API que si la valeur de l'état de retour shouldSave est vraie.

Je voudrais également utiliser la syntaxe async/await pour vous assurer que l'appel api réussit avant répartissant l'action redux locale.

Thunk Exemple - l'ajout d'un nouvel élément

import api from './api' 

export const addNew = async (item) => { 
    return (dispatch, getState) => { 
    try{ 
     const state = getState() 
     if(state.shouldSave){ 
     await api.save(item) 
     } 
     dispatch({ 
     type: ITEM_ADD_NEW, 
     data: item 
     }) 
    }catch(err){ 
     const error = new Error("There was a problem adding the new item") 
     error.inner=err 
     throw(error) 
    } 
    } 
}