Quand dois-je ajouter Redux à Réagir application?
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-javascript, mais 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.
Vous devez vous connecter pour publier un commentaire.
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'état récupère “étaler” à travers de nombreuses composantes, 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 peut (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 du réagir-howto guide, je vous suggère de lire aussi bien.)
J'ai trouvé que le chemin idéal pour l'ajout de Redux à une demande ou à une pile est d'attendre jusqu'à ce que après vous/app/équipe ressentent les douleurs qu'elle n'en résout. Une fois que vous commencez à voir de longues chaînes de
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" comme http://redux.js.org/docs/introduction/ThreePrinciples.html
J'ai préparé ce document pour comprendre Redux. Espérons que cela efface le doute.
-------------------------- REDUX TUTORIEL ----------------------
ACTIONS-
Les Actions sont des charges utiles de l'information qui envoient des données à partir de votre application dans le magasin. Ils sont la seule source d'information à partir de la boutique. Vous pouvez les envoyer
en utilisant uniquement le magasin.dispatch().
Actions sont simples objet javascript. L'Action doit avoir un [ type ] propriété qui indique le type d'action effectuée. Le type doit être défini comme une constante de chaîne.
D'ACTION des Créateurs-----
---------------- ---- Action créateurs sont exactement la fonction qui crée l'action
Il est facile de faire un amalgame entre les termes - action et de l'action du créateur.
Dans redux action, créateur renvoie à une action.
à initialte expédition transmettre le résultat à l'expédition() fonction.
Alternativement, vous pouvez créer une action lié créateur qui distribue automatiquement.
maintenant, vous pouvez directement appelé
Le dispatch() fonctionn peut être directement accessibles à partir du magasin.dispatch(). mais nous
accéder à l'aide d'un helper méthode connect ().
Actions.js.....................
Actions...........
Actions Créateurs
fonction d'exportation addToDO(texte){
de retour {
type: ADD_TODO,
texte
}
}
.........................RÉDUCTEURS..................................
Réducteurs de spécifier la façon dont les demandes de modifications de l'état en réponse aux actions envoyé à la banque.
De la conception de l'état shap
Dans redux tout l'état de l'application est de stocker dans un seul objet. Vous avez à stocker des données, ainsi que de l'état.
{
visibilityFilter: 'SHOW_ALL',
todos: [
{
texte: "Envisager d'utiliser redux',
terminé: vrai
},
{
texte: "Kepp tous à l'état de simple arbre"
}
]
}
Opérations De Traitement Des
---------------- les réducteurs sont le pur des fonctions de l'état précédent et de l'action, et le retour d'un nouvel état.
(previousState, action) => newState
Nous allons commencer par la spécification de l'état initial. Redux appelle notre réducteurs avec un état indéfini pour la première fois. c'est notre chance de retourner à l'état de notre application.
vous pouvez faire de même en utilisant ES6 façon de gestion de la JS
................................. MAGASIN...................................
Le magasin est un objet qui les rassemble. le magasin a la responsabilité
Note. utilisation combineReducers() pour combiner plusieurs réducteurs dans un.
const store = createStore(todoapp); //le todoapp sont les réducteurs
Tout d'abord, vous n'avez pas besoin d'ajouter
Redux
à votre demande si vous n'en avez pas besoin! Simple, alors ne vous forcez pas à l'inclure dans votre projet, si vous n'avez pas besoin du tout! 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 pour comprendre ce Redux fait d'abord un coup d'œil:
Aussi ce comment Redux introduire lui-même:
Également selon la documentation, il y a Trois Principes pour
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 toute la route... tout simplement à l'aide de
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!
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.
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.