web-dev-qa-db-fra.com

Modifier l'état dans Redux DevTools Extension

Dans mon état d'application, des valeurs sont définies en tant que initialState.

Avec les outils de développement React , il est très facile de modifier directement une valeur d'état.

Est-ce que quelque chose de similaire est possible dans Redux DevTools Extension , c’est-à-dire cliquer et insérer une nouvelle valeur pour une propriété spécifique?

Dans this SO anwer, il est indiqué qu'il est possible de "changer tout ce que vous voulez", mais je ne trouve pas comment.

Dans le volet Etat -> Raw (voir la photo ci-dessous), vous pouvez écraser des valeurs, mais cela ne semble pas être appliqué.

 enter image description here

9
Fellow Stranger

L'un des principes de base du magasin Redux est qu'il ne peut être modifié que par les fonctions de réduction, chaque fois qu'une action est envoyée.

Par conséquent, je ne pense pas qu'il soit possible de modifier l'état du magasin dans Redux DevTools, mais au moins vous pouvez voyager dans le temps ou supprimer directement les actions sélectionnées (ce que je fais souvent pour simuler une demande AJAX est toujours en attente).

Si vous voulez vraiment changer l'état de votre magasin, vous pouvez affecter le magasin (lorsqu'il est créé via createStore) à window._store, puis appeler window._store.dispatch({type: "...", ...}); directement à partir de la console.

2
Michael Tamm

Vous pouvez provoquer l'envoi d'une action qui met à jour votre objet (ou vous pouvez le saisir à la main, selon ce qui vous convient le mieux), puis vous pouvez créer une nouvelle répartition directement à partir de l'outil avec le bouton suivant  enter image description here

par exemple, si vous souhaitez simuler le serveur a renvoyé un objet dans un état différent, il vous suffit d'envoyer l'action qui a à nouveau mis à jour l'objet avec les champs modifiés.

2
Vnvizitiu

L’avantage de Redux Devtools est qu’il adhère bien aux principes de Redux. La seule façon de modifier l'état consiste à envoyer une action avec les paramètres personnalisés souhaités, puis à laisser le réducteur gérer la logique de changement d'état. Ceci est préférable, de sorte qu'il adhère au deuxième principe (l'état est en lecture seule) et au troisième principe de Redux qui stipule:

Les modifications sont effectuées avec des fonctions pures

Pour spécifier comment l’arbre d’état est transformé en actions, vous écrivez des réducteurs purs.

Ainsi, la manière dont vous effectuez un changement d'état consiste à définir une action spécifique modifiant l'état que vous souhaitez via le réducteur.

Il y a une raison très importante à cela - de cette façon, vous pouvez vérifier que l'état que vous essayez de tester est en fait un état possible dans lequel votre application peut se retrouver. Si vous avez muté des fragments de l'état directement, il est possible que votre application n'atteigne jamais cet état.

Cela peut sembler fastidieux, mais cela signifie que si vous voulez essayer de tester un état complexe que votre application pourrait rencontrer, vous devrez envoyer toutes les actions correctes pour atteindre cet état, mais au moins vous savez que c'est un état possible. votre application va s'exécuter et comment vos utilisateurs peuvent atteindre cet état.

0
aug