Avons-nous de la liberté pour capturer les changements d'état en utilisant les sagas?

Question

Fondamentalement besoin de construire un modal d'avertissement, lorsque l'utilisateur essaie de passer de la page/écran en cours à une autre page, montrant qu'il y a quelques modifications enregistrées.

Toutes les implémentations utilisant Redux et saga Redux

Answer 1

Sagas sont le répertoire lib pour cela - ils regardent pour toute action d'un type spécifié. La navigation prendra deux actions: une pour indiquer que la navigation est sur le point d'arriver (que la saga suivra) et une pour mettre à jour la page actuelle. La saga surveille les actions du premier type et affiche une boîte de dialogue d'avertissement si les données ont changé.

Ex:

function showWarning(action) { 
    if (/* data has been changed but not saved */) { 
    displayWarningDialog(action.pageToNavigateTo) 
    } 
    else { 
    // action that updates the page/location 
    completeNavigation(action.pageToNavigateTo) 
    } 
} 

function* mySaga() { 
    // NAVIGATE_TO_PAGE_X are the actions that get fired when a user changes pages 
    yield takeEvery("NAVIGATE_TO_PAGE_1", showWarning) 
    yield takeEvery("NAVIGATE_TO_PAGE_2", showWarning) 
} 

Answer 2

Il est étonnant Redux DevTools pour le débogage de l'État. Cet outil a été construit par l'auteur Redux lui-même.

Voici ses caractéristiques

• vous permet d'inspecter tous les états et de l'action charge utile
• vous permet de revenir dans le temps par « annulation » actions
• Si vous modifiez le code réducteur, chaque « mis en scène » l'action sera réévalué
• Si les réducteurs jettent, vous verrez au cours de laquelle l'action ce est arrivé, et ce que l'erreur était
• Avec activateur de magasin persistState(), vous pouvez persister des sessions de débogage à travers la page rechargements

Answer 3

J'ai pensé récemment à ce sujet aussi bien et pensé à écrire une certaine forme de middleware pour intercepter les actions de routage. Lors de l'interception d'une action de routage, le middleware peut déterminer si l'état de l'application indique que l'utilisateur est en train d'éditer certaines données non enregistrées, et si c'est le cas, envoyer une action différente à la place. Cette action devrait réduire l'état et provoquer un avertissement à rendre. L'utilisateur peut alors confirmer vouloir continuer à naviguer en envoyant une action également interceptée par le middleware pour poursuivre le processus de routage.