Quand devrais-je ajouter Redux à une application React?

Question

Je suis actuellement en apprentissage de Réagir et je suis à essayer de comprendre comment l'utiliser avec Redux pour la construction d'une application mobile. Je suis un peu confus sur la façon dont les deux sont liés/utilisable en même temps. Par exemple, j'ai terminé ce tutoriel à Réagir https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascriptmais maintenant, je veux jouer avec l'ajout de certains réducteurs/actions pour cette application et je ne suis pas sûr de l'endroit où ceux qui ferait le lien avec ce que j'ai déjà fait.

Answer 1

Réagir est un framework d'INTERFACE qui prend soin de la mise à jour de l'INTERFACE utilisateur en réponse à la "source de la vérité" qui est généralement décrit comme un état "possédé" par certains composants. La pensée de Réagir décrit la Réagir la propriété de l'etat concept très bien, et je vous suggère fortement de passer par là.

Cette propriété de l'etat est un modèle qui fonctionne bien lorsque l'état est hiérarchisée, ce qui correspond plus ou moins à la structure des composants. De cette façon, l'etat se "répandre" dans de nombreux composants, et l'application est facile à comprendre.

Cependant, parfois éloignés des parties de l'application souhaitez avoir accès à un même état, par exemple, si vous cache des données extraites et voulez toujours mettre à jour de partout à la fois. Dans ce cas, si vous suivez les Réagir modèle, vous vous retrouverez avec un tas de très grandes pièces en haut de la composante de l'arbre qui passent une myriade d'accessoires vers le bas par le biais de certains composants intermédiaires qui ne les utilisent pas, juste pour arriver à un peu de feuilles de composants qui se soucient réellement de données.

Lorsque vous vous trouvez dans cette situation, vous pouvez (mais ne pas le faire) utiliser Redux "extrait" cet état logique de gestion de haut-niveau des composants dans des fonctions distinctes appelées "réducteurs", et "se connecter" de la feuille de composants qui se soucient de l'état directement au lieu de passer les accessoires par le biais de l'ensemble de l'application. Si vous n'avez pas ce problème encore, vous n'avez probablement pas besoin de Redux.

Enfin, notez que Redux n'est pas une solution définitive à ce problème. Il existe de nombreuses autres façons de gérer votre état local à l'extérieur de l'Réagissent composants-par exemple, certaines personnes qui n'aiment pas Redux sont heureux avec MobX. Je vous suggère d'abord d'obtenir une solide compréhension de Réagir modèle d'état, puis d'évaluer les différentes solutions de façon autonome, et de construire de petites applications avec eux pour avoir une idée de leurs forces et de leurs faiblesses.

(Cette réponse est inspiré par Pete Chasse de réagir-howto guide, je vous suggère de lire aussi bien.)

Answer 2

J'ai trouvé que le chemin idéal pour l'ajout de Redux à une demande ou à une pile est d'attendre jusqu'à après que vous/app/équipe ressentent les douleurs qu'elle n'en résout. Une fois que vous commencez à voir de longues chaînes d' props bâtiment et d'être transmis à travers de multiples niveaux de composants ou de votre trouver vous-même l'orchestration complexe de l'état manipulations/lit, qui pourrait être un signe que votre application peut bénéficier de l'introduction de Redux et coll.

Je vous recommande de prendre une application que vous avez déjà construit avec "de se contenter de Réagir" et de voir comment Redux peut adapter. Voir si vous pouvez normalement introduire en arrachant un morceau de l'etat ou d'un ensemble de "mesures" à un moment. Refactoriser vers elle, sans être tributaire d'un big bang de réécriture de votre application. Si vous éprouvez toujours de la difficulté à voir où il pourrait ajouter de la valeur, alors que cela pourrait être un signe que votre application n'est pas grand ou suffisamment complexe pour mériter quelque chose comme Redux sur le dessus de Réagir.

Si vous n'avez pas rencontré encore, Dan (réponse ci-dessus) a une grande court vidéo de la série qui marche à travers Redux sur un niveau plus fondamental. Je vous suggère fortement de passer quelques temps à l'absorption des éléments: https://egghead.io/series/getting-started-with-redux

Redux a aussi une assez grande docs. Surtout expliquer beaucoup de "pourquoi", tels que http://redux.js.org/docs/introduction/ThreePrinciples.html

Answer 3

C'est de cette façon redux œuvres. Une action est distribué à partir de n'importe quel compoenent ou de la vue. L'Action DOIT avoir propriété "type" et peut être tout de la propriété qui contient les informations de l'action qui s'est passé. Les données transmises dans l'action, pourrait être utile à différents réducteur, donc même objet se passait à différents réducteur. Chaque réducteur prend/ faire-son rôle/contribution à l'état. La sortie est ensuite fusionné et le nouvel état est formé, et la composante qui doit être souscrit pour le changement d'état de l'événement est notifié.

Dans l'exemple ci-dessus, de couleur brune a tous les 3 component RGB. Chaque réducteur reçoit la même couleur brune et ils séparée de sa contribution à la couleur.

Answer 4

Tout d'abord, vous n'avez pas besoin d'ajouter Redux de votre application si vous n'en avez pas besoin! Simple, alors ne vous forcez pas à l'inclure dans votre projet, si vous n'en avez pas besoin! Mais cela ne signifie pas Redux n'est pas bon, il est vraiment utile dans les applications de grande taille, afin de lire sur ...

Redux est un état de gestion pour vos Réagir application, pensez - Redux comme un magasin local qui le suivi de votre état, vous pouvez accéder à l'état de n'importe quelle page et l'itinéraire que vous voulez, aussi de les comparer à des Flux, vous n'avez qu'un seul magasin, signifie une seule source de vérité...

Regardez cette image de comprendre ce Redux fait d'abord un coup d'œil:

Aussi ce comment Redux introduire lui-même:

Redux est un état prévisible de conteneur pour les applications JavaScript.

Il vous permet d'écrire des applications qui se comportent de manière cohérente, en les différents environnements (client, serveur, et natif), et sont faciles à test. En plus de cela, il fournit une grande expérience de développement, tels en direct d'édition de code combiné avec un temps de voyage débogueur.

Vous pouvez utiliser Redux avec Réagir, ou avec tout autre point de vue de la bibliothèque. Il est tout petit (2kB, y compris les dépendances).

Aussi, d'après les documents, il y a Trois Principes pour l' Redux comme ci-dessous:

1. Source unique de la vérité

2. L'état est en lecture seule

3. Des modifications sont apportées avec les fonctions pures

Donc, fondamentalement, lorsque vous en avez besoin à un seul magasin à garder une trace de ce que vous voulez dans votre application, puis Redux est à portée de main, vous pouvez y accéder de n'importe où dans votre application, dans n'importe quel itinéraire... simplement à l'aide d' store.getState();

Aussi à l'aide du middleware Redux, vous pouvez le faire gérer l'état beaucoup mieux, il y a une liste de pratique et composants middleware sur la page officielle de Redux!

Simplement, si votre demande va être grand, avec de nombreux composants, les états de routage et d'essayer de implémente Redux de commencer! Il va vous aider sur la façon pour vous!

Answer 5

Lorsque nous écrivons, l'application nous avons besoin de la gestion de l'état de l'application. La Réagir gère les états localement au sein de la composante si nous avons besoin de partager les états entre les composants, nous pouvons utiliser des accessoires ou des rappels.

Mais comme la demande augmente, il devient difficile de gérer les états et les transformations de l'état.L'état et les transformations besoin pour bien suivies afin de déboguer les applications.

Redux est un état prévisible de conteneur pour les applications JavaScript qui gère l'état et ses transformations, et est souvent utilisé à Réagir,

Le concept de redux peut être expliqué dans l'image suivante.

Lorsque l'utilisateur déclenche une action lorsque l'utilisateur d'interagir avec le composant et une action est distribué à stocker puis le réducteur dans le magasin accepte de l'action et de mise à jour de l'état de l'application et stockées dans l'application à l'échelle immuable variable globale lorsqu'il y a une mise à jour dans le magasin de la vue correspondante composant souscrit à l'état seront mis à jour.

Depuis que l'état est géré à l'échelle mondiale et avec redux, il est plus facile à maintenir.