web-dev-qa-db-fra.com

React-Redux: tous les états des composants doivent-ils être conservés dans Redux Store?

Disons que j'ai une bascule simple:

Lorsque je clique sur le bouton, le composant Couleur change entre le rouge et le bleu

Je pourrais atteindre ce résultat en faisant quelque chose comme ça.

index.js

Button: onClick={()=>{dispatch(changeColor())}}
Color: this.props.color ? blue : red

conteneur.js

connect(mapStateToProps)(indexPage)

action_creator.js

function changeColor(){
 return {type: 'CHANGE_COLOR'}
}

réducteur.js

switch(){
case 'CHANGE_COLOR':
return {color: true}

mais c’est beaucoup de code à écrire pour quelque chose que j’aurais pu réaliser en 5 secondes avec jQuery, des classes et des css ...

Donc, je suppose que ce que je demande vraiment, c'est ce que je fais mal ici?

javascriptreactjsredux
74
l2silver

Redux est principalement destiné à "l'état de l'application". Autrement dit, tout ce qui concerne la logique de votre application. La vue construite au-dessus de celle-ci reflète cet état, mais ne doit pas utiliser exclusivement ce conteneur d'état pour tout ce qu'elle fait.

Posez simplement ces questions: Cet état est-il important pour le reste de l'application? Est-ce que d'autres parties de l'application se comporteront différemment en fonction de cet état? Dans de nombreux cas mineurs, ce ne sera pas le cas. Prenez un menu déroulant: le fait qu'il soit ouvert ou fermé n'aura probablement aucun effet sur les autres parties de l'application. Donc, le connecter à votre magasin est probablement excessif. C'est certainement une option valable, mais ne vous procure pas vraiment d'avantages. Vous feriez mieux d'utiliser this.state et en l'appelant un jour.

Dans votre exemple particulier, la couleur de ce bouton est-elle basculée pour faire une différence dans les autres parties de l'application? S'il s'agit d'une sorte d'activation/désactivation globale pour une grande partie de votre application, elle appartient définitivement au magasin. Mais si vous ne faites que basculer la couleur d'un bouton lorsque vous cliquez dessus, vous pouvez laisser l'état de la couleur défini localement. Le fait de cliquer sur le bouton peut avoir d'autres effets nécessitant une dépêche d'action, mais cela est distinct de la simple question de savoir quelle couleur elle devrait être.

En général, essayez de garder votre état d'application aussi petit que possible. Vous ne devez pas pousser tout dedans. Faites-le quand vous devez ou il est très logique de garder quelque chose là-bas. Ou si cela vous simplifie la vie lorsque vous utilisez Outils de développement. Mais ne surchargez pas trop son importance.

130
Tim Dorr

FAQ Redux: Etat organisateur
Cette partie du document officiel de redux a bien répondu à votre question.

L'utilisation de l'état du composant local est correcte . En tant que développeur, il vous incombe de déterminer quels types d’états composent votre application et où chaque élément d’état doit vivre. Trouvez une balance qui vous convient et allez-y.

Quelques règles communes pour déterminer le type de données à mettre dans Redux:

  • Est-ce que d'autres parties de l'application s'intéressent à ces données?
  • Avez-vous besoin de pouvoir créer d'autres données dérivées basées sur ces données d'origine?
  • Les mêmes données sont-elles utilisées pour piloter plusieurs composants?
  • Avez-vous intérêt à pouvoir restaurer cet état à un moment donné (par exemple, le débogage de voyage dans le temps)?
  • Voulez-vous mettre les données en cache (c.-à-d., Utilisez ce qui est dans l'état s'il est déjà là au lieu de le redemander)?
14
chuck911

Dans le but de mettre en valeur l'excellent lien fourni par @ AR7, et parce que ce lien a été déplacé il y a quelque temps:

Utilisez React pour un état éphémère qui n'a aucune importance pour l'application et qui ne mute pas de manière complexe. Par exemple, une bascule dans un élément de l'interface utilisateur, un état de saisie du formulaire. Utilisez Redux pour état qui a une importance globale ou qui subit une mutation complexe, par exemple, les utilisateurs en cache ou un post-brouillon.

Parfois vous voudrez passer de l’état Redux à l’état React (lorsque stocker quelque chose dans Redux devient gênant)) ou l’inverse (lorsque davantage de composants doivent avoir accès à un état être local).

La règle de base est la suivante: faites tout ce qui est moins gênant.

Dan Abramov: https://github.com/reactjs/redux/issues/1287#issuecomment-175351978

4
ptim