Quand dois-je ajouter Redux à une application React?
J'apprends actuellement React et j'essaie de comprendre comment l'utiliser avec Redux pour créer une application mobile. Je suis un peu confus sur la façon dont les deux sont liés/utilisables ensemble. Par exemple, j'ai terminé ce didacticiel en React https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript , mais maintenant, je veux jouer avec l'ajout de réducteurs/actions à cette application et je ne sais pas où ceux-ci seraient liés à ce que j'ai déjà fait.
React est un cadre d'interface utilisateur qui s'occupe de mettre à jour l'interface utilisateur en réponse à la "source de vérité" qui est généralement décrite comme un état "appartenant" à un composant. Penser dans React décrit très bien le React concept de propriété d'État, et je vous suggère fortement de le parcourir.
Ce modèle de propriété de l'État fonctionne bien lorsque l'état est hiérarchique et correspond plus ou moins à la structure du composant. De cette façon, l'état est "réparti" sur de nombreux composants et l'application est facile à comprendre.
Cependant, des parties parfois distantes de l'application souhaitent avoir accès au même état, par exemple, si vous mettez en cache des données extraites et souhaitez les mettre à jour de manière cohérente partout en même temps. Dans ce cas, si vous suivez le modèle React, vous vous retrouverez avec un tas de très gros composants en haut de l'arborescence des composants qui passent une myriade d'accessoires vers le bas à travers certains composants intermédiaires qui ne les utilisent pas, juste pour atteindre quelques composants feuille qui se soucient réellement de ces données.
Lorsque vous vous trouvez dans cette situation, vous pouvez (mais ne devez pas) utiliser Redux pour "extraire" cette logique de gestion d'état du haut- niveler les composants dans des fonctions distinctes appelées "réducteurs" et "connecter" les composants feuilles qui se soucient de cet état directement au lieu de passer les accessoires à travers l'application entière. Si vous n'avez pas encore ce problème, 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 en dehors des composants React - par exemple, certaines personnes qui n'aimaient pas Redux sont satisfaites de MobX . Je suggère vous devez d'abord bien comprendre le modèle d'état React, puis évaluer les différentes solutions indépendamment, et créer de petites applications avec elles pour avoir une idée de leurs forces et de leurs faiblesses.
(Cette réponse est inspirée du guide react-howto de Pete Hunt, je vous suggère de le lire également.)
J'ai trouvé que le chemin idéal pour ajouter Redux à une application/pile est d'attendre après que vous/l'application/l'équipe ressentiez les douleurs résout. Une fois que vous commencez à voir de longues chaînes de props s'accumuler et se transmettre à plusieurs niveaux de composants ou que vous vous trouvez en train d'orchestrer des manipulations/lectures d'états complexes, cela pourrait être un signe que votre application pourrait bénéficier de l'introduction de Redux et al .
Je recommande de prendre une application que vous avez déjà construite avec "juste React" et de voir comment Redux pourrait s'y intégrer. Voyez si vous pouvez l'introduire gracieusement en arrachant un morceau d'état ou un ensemble "d'actions" à la fois. Refactorisez-vous vers elle, sans vous accrocher à une réécriture big bang de votre application. Si vous rencontrez toujours des difficultés pour voir où cela pourrait ajouter de la valeur, cela pourrait être un signe que votre application n'est pas assez grande ou complexe pour mériter quelque chose comme Redux en plus de React.
Si vous ne l'avez pas encore rencontré, Dan (réponse ci-dessus) a une excellente série de courtes vidéos qui parcourt Redux à un niveau plus fondamental. Je suggère fortement de passer du temps à en absorber des morceaux: https://egghead.io/series/getting-started-with-redux
Redux a également de très bons documents. Expliquant en particulier beaucoup de "pourquoi" tels que http://redux.js.org/docs/introduction/ThreePrinciples.html
J'ai préparé ce document pour comprendre Redux. J'espère que cela efface votre doute.
-------------------------- REDUX TUTORIAL ----------------------
ACTIONS - Les actions sont des charges utiles d'informations qui envoient des données de votre application au magasin. Ils sont la seule source d'information du magasin. Vous ne pouvez les envoyer qu'en utilisant store.dispatch ().
Example-
const ADD_TODO = 'ADD_TODO'
{
type:ADD_TODO,
text: 'Build my first redux app'
}
Les actions sont un simple objet javascript. L'action doit avoir une propriété [type] qui indique le type d'action en cours d'exécution. Le type doit être défini comme une constante de chaîne.
CRÉATEURS D'ACTIONS ----- ---------------- ---- Les créateurs d'actions sont exactement la fonction qui crée l'action. Il est facile de confondre les termes - action et créateur d'action. En action redux, le créateur renvoie une action.
function addToDo(text) {
return {
type: ADD_TODO,
text
}
}
pour initialiser la répartition, passez le résultat à la fonction dispatch ().
- répartition (addToDo (texte));
- répartition (completeToDo (index))
Alternativement, vous pouvez créer un créateur d'action lié qui envoie automatiquement.
cosnt boundAddTodO = text => dispatch(addToDo(text));
maintenant vous pouvez l'appeler directement
boundaddTodO(text);
La fonction dispatch () est accessible directement depuis store.dispatch (). mais nous y accédons en utilisant une méthode helper connect ().
Actions.js .....................
Actes...........
exports cosnt ADD_TODO = 'ADD_TODO';
exports cosnt TOGGLE_TODO = 'TOGGLE_TODO'
Créateurs d'actions
fonction d'exportation addToDO (text) {return {type: ADD_TODO, text}}
......................... RÉDUCTEURS ........................ ..........
Les réducteurs spécifient comment l'état des applications change en réponse aux actions envoyées au magasin.
Concevoir la forme de l'État
En redux, tout l'état de l'application est stocké dans un seul objet. Vous devez stocker certaines données ainsi que certains états.
{visibilitéFilter: 'SHOW_ALL', todos: [{text: 'Envisagez d'utiliser redux', complété: true}, {text: 'Kepp tout l'état dans une seule arborescence'}]}}
Actions de gestion ---------------- les réducteurs sont les fonctions pures qui prennent l'état et l'action précédents et retournent un nouvel état.
(previousState, action) => newState
Nous commencerons par spécifier l'état initial. Redux appellera nos réducteurs avec un état indéfini pour la première fois. c'est notre chance de retourner l'état de notre application.
import { visiblilityFilters } from './actions';
const initialState = {
visibilityFilter: VisibilityFilters.SHOW_ALL,
todo: []
}
function todoApp(state, action){
if(typeof state == 'undefined'){
return initialState;
}
// dont handle other cases as of now.
return state;
}
vous pouvez faire de même en utilisant ES6 pour gérer le JS
function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return Object.assign({}, state, {
visibilityFilter: action.filter
})
default:
return state
}
}
................................. LE MAGASIN................ ...................
Le magasin est un objet qui les rassemble. le magasin a la responsabilité suivante
- maintenir l'état de l'application
- autoriser l'accès à l'état via getState ()
- Autoriser la mise à jour de l'état via dispatch ()
- Inscrire listerneres via un abonné (auditeur)
Remarque. utilisez combineReducers () pour combiner plusieurs réducteurs en un seul.
const store = createStore (todoapp); // les todoapp sont les réducteurs
Voici comment fonctionne redux. Une action est envoyée à partir de tout composant ou vue. L'action DOIT avoir une propriété "type" et peut être n'importe quelle propriété contenant des informations sur l'action qui s'est produite. Les données transmises en action peuvent être pertinentes pour différents réducteurs, de sorte que le même objet est transmis à différents réducteurs. Chaque réducteur prend/établit sa part/contribution à l'état. La sortie est ensuite fusionnée et un nouvel état est formé, et le composant qui doit être abonné pour l'événement de changement d'état est notifié.
Dans l'exemple ci-dessus, la couleur brune a tous les 3 composants RVB. Chaque réducteur reçoit la même couleur brune et sépare sa contribution à la couleur.
Lorsque nous écrivons une application, nous devons gérer l'état de l'application. Le React gère les états localement au sein du composant si nous devons partager les états entre les composants, nous pouvons utiliser des accessoires ou des rappels.
Mais à mesure que l'application se développe, il devient difficile de gérer les états et les transformations d'état. Les transformations d'état et d'état doivent être correctement suivies afin de déboguer les applications.
Redux est un conteneur d'état prévisible pour les applications JavaScript qui gère l'état et les transformations d'état et est souvent utilisé avec React,
Le concept de redux peut être expliqué dans l'image suivante.
Lorsque l'utilisateur déclenche une action lorsque l'utilisateur interagit avec le composant et qu'une action est envoyée pour stocker, le réducteur dans le magasin accepte l'action et met à jour l'état de l'application et stocké dans la variable globale immuable à l'échelle de l'application lorsqu'il y a une mise à jour en magasin le composant de vue correspondant abonné à l'état sera mis à jour.
Étant donné que l'état est géré globalement et avec redux, il est plus facile à maintenir.
Tout d'abord, vous n'avez pas besoin d'ajouter Redux à votre application si vous n'en avez pas besoin! C'est simple, alors ne vous forcez pas à l'inclure dans votre projet si vous n'en avez pas du tout besoin! Mais cela ne signifie pas que Redux n'est pas bon, c'est vraiment utile dans les grandes applications, alors lisez la suite ...
Redux est une gestion d'état pour votre React application, pensez à Redux comme un magasin local qui suit votre état au fur et à mesure, vous pouvez accéder à l'état dans n'importe quelle page et route vous voulez, comparez aussi à Flux, vous n'avez qu'un seul magasin, c'est une source de vérité ...
Regardez cette image pour comprendre ce que Redux fait d'abord en un coup d'œil:
C'est également ainsi que Redux se présente:
Redux est un conteneur d'état prévisible pour les applications JavaScript.
Il vous aide à écrire des applications qui se comportent de manière cohérente, s'exécutent dans différents environnements (client, serveur et natif) et sont faciles à tester. En plus de cela, il offre une excellente expérience de développeur, telle que l'édition de code en direct combinée à un débogueur de voyage dans le temps.
Vous pouvez utiliser Redux avec React ou avec toute autre bibliothèque de vues. Il est minuscule (2 Ko, dépendances comprises).
Toujours selon la documentation, il existe trois principes pour Redux comme ci-dessous:
1. Source unique de vérité
2. L'état est en lecture seule
3. Les modifications sont effectuées avec des fonctions pures
Donc, fondamentalement, lorsque vous avez besoin d'un magasin unique pour garder une trace de tout ce que vous aimez dans votre application, Redux est pratique, vous pouvez y accéder n'importe où dans votre application, dans n'importe quel itinéraire ... simplement en utilisant store.getState();
En utilisant également le middleware Redux, vous pouvez mieux gérer l'état, il y a une liste de composants pratiques et middleware sur la page officielle de Redux!
Tout simplement si votre application va être volumineuse, avec de nombreux composants, états et routages, essayez d'implémenter Redux dès le début! Cela vous aidera à coup sûr!