Comment gérer objet gel pour Redux

Question

En ce qui concerne redux -> en mode développement, je voudrais « geler » l'état de l'objet après les réducteurs ont fait leur travail et avant les abonnés être averti ...

Mon approche était de définir le middleware pour "geler" l'état de l'objet (par exemple avec le module de noeud deep-freeze-strict).

Mais il semble que ce n'est pas la bonne approche. En raison d'un abonné reçoit l'état mis à jour avant que le gel ait lieu ...

Est-ce que quelqu'un a une idée comment définir un tel gel avant que les abonnés sont avisés ??

Answer 1

Ma solution pour cela était de définir une fonction qui enveloppe les réducteurs:

export function freezeStateOfReducer(reducer): any { 
    return (state, action) => { 

    let newState = reducer(state, action); 

    freezeState(newState); 

    return newState; 

    }; 
} 

export const rootReducer = combineReducers({ 
    firstReducer: ... 
}); 

createStore(freezeStateOfReducer(rootReducer)); 

Answer 2

C'est une question intéressante, en fait. Dans théorie, les seules mises à jour d'état devraient se produire dans le réducteur. En pratique, j'ai certainement vu des cas où les gens mutaient accidentellement des choses dans leurs fonctions mapState. Vous avez certainement raison que les abonnés sont notifiés avant que le middleware ne voit l'état mis à jour.

Ce peut être être un cas d'utilisation valide pour un rehausseur de magasin, ce qui pourrait garantir que l'état est gelé avant de notifier les abonnés. Ou, un réducteur d'ordre supérieur qui entoure votre réducteur de racine normal.

De plus, il existe déjà plusieurs utilitaires «gel de l'état dans le développement». Voir la section DevTools#Linting de mon Redux addons catalog pour une liste de ces bibliothèques existantes.