Tutoriel Redux/React : Redux
HTML-код
- Опубликовано: 2 сен 2020
- Article ► grafikart.fr/tutoriels/redux-...
Abonnez-vous ► bit.ly/GrafikartSubscribe
Dans cette vidéo je vous propose de découvrir le gestionnaire d'état centralisé [Redux](redux.js.org/).
Soutenez Grafikart:
Devenez premium ► grafikart.fr/premium
Donnez via Utip ► utip.io/grafikart
Retrouvez Grafikart sur:
Le site ► grafikart.fr
Twitter ► / grafikart_fr
Discord ► grafikart.fr/tchat 
Наука
Incroyable que ce cours sois gratuit, ce professeur arrive à expliquer les choses avec une simplicité déconcertante!!! Milles mercis.
Tutoriel incroyable, très clair et facile à suivre. La conclusion à la fin a juste tout rassemblé. Merci beaucoup pour ce merveilleux contenu.
T'es contenue de vidéo regroupe vraiment tout c'est super intéressant franchement encore merci pour ta motivation et ton temps ça fait plaisir chef.
Merci beaucoup pour ce tutoriel, je viens de voir clair sur Redux car j'avais fait le choix de mobx par manque de comprehension de cette outils.
vraiement merci pour ce tuto redux sert vraiement a beaucoup de projet ❤️
Comme d'hab super video, merci !
Merci pile au bon moment !
Merci pour cette vidéo, je m'intéressais justement au sujet.
Merci beaucoup Grafikart pour ce tutoriel, j'ai une meilleure d'ensemble sur les états.
propre... c'est tu top.. merci pour le partage..
Vous êtes formidable, c'est un plaisir d'apprendre avec vous.
edit, commentaire à part: Je ne trouve pas le bouton "Aimer" le contenu de vos vidéos lorsque visionnées depuis votre site.
Pourquoi jai pas eu ce tutoriel plus tot🙆🏿♂️🙆🏿♂️, super bien expliqué😭👍
Thank you so much!
Très cool cette vidéo
Je t'adore
Simple, limpide. Merci merci merci
J'avoue que c'est pas facile Redux
😅😅😅😅
Jonathan merci...mes prières on été entendu...
Bien expliqué
Super tutoriel, merci 🙂 Pourrais-tu s'il te plait partager le code de la vidéo sur un repo GitHub pour que l'on puisse le relire plus facilement ?
Quelle est l'extension d'auto-complétion que tu utilises stp ?
Pour utilisez vous un callback dans avec le dispatch de useDispatch ?
un exemple sans callback
import React from 'react'
import { useDispatch } from 'react-redux'
export const CounterComponent = ({ value }) => {
const dispatch = useDispatch()
return (
{value}
dispatch({ type: 'increment-counter' })}>
Increment counter
)
}
Il faut reconnaitre que react est plus compliqué que angular
Quel IDE utilises-tu Jonathan ?
Super tutoriel et excellentes explications comme d’hab, d’autant plus que Redux est souvent assez mal expliqué a part par les références de la formation coding (par exemple Stephen Grinder sur Udemy)
PHPStorm pour l'IDE ;)
@@grafikart du coup tu les as tous les Storm ? Intel, web etc ? ou tu code sur vscode ?
C'est dommage ca va trop vite (copier/coller) et c'est trop verbeux (hérité de la culture symfony php avec les classes) il y a plus simple pour aborder redux dans un exemple plus ancré dans le monde réel. Vous avez beaucoup de connaissances, merci comme même.
Super cours comme toujours, mais je pense que je passe à côté de quelque chose.
Je viens principalement de l'écosystème Angular et je ne comprends pas l'intérêt de Redux en comparaisons à des équivalences de services.
Les services permettent de parler métier, de facilement découper le code et ne peuvent pas rentrer en conflits.
Je conçois la facilité d'abonnements aux stores, et je pense que les services ne deviennent envisageables qu'avec une bibliothèque facilitant des observeurs/observables.
Quand je vois la quantité de code nécessaire à chaque actions, avec des fonctions "switch" qui peuvent vite grossir, je ne trouve aucun avantage par rapport à des singletons (ou un système d'injection de dépendances) fournissant les comportements et données attendus
J'espère avoir été clair dans ce que je ne comprends pas, en espérant une réponse de la part de la communauté :)
Gros bonus pour ce tuto : montrer les devtools, c'est une tuerie, on me les a jamais montré dans mes cours en école, c'était je pense une erreur de la part de mon prof ...
Pour le coup je ne pourrais pas trop comparer car je n'ai pas mis les mains dans Angular. Redux est une solution qui a du sens dans l'écosystème React car le framework travaille beaucoup avec ces concepts d'immutabilité et de fonctions pures. Je ne suis pas sûr que cela soit pertinent pour Angular effectivement.
Par rapport à angular et les services... cela revient presque à la même philosophie si tes services exposent tes données sous forme d'observables en lecture seule et que tes vues s'abonnent aux changements.
De mon point de vue voici les grosses différences :
- les services sont éclatés alors que le store redux est unique. Souvent les services vont dériver avec un risque de mélange de responsabilité. Aussi, certains états applicatifs sont difficiles à placer dans des services fourre tout. D'un autre côté il n'est pas non plus évident de bien modéliser le store redux mais cela possède la vertu de le faire au même endroit.
- redux permet de faire une application réactive qui se base sur l'état du store. Du coup dans l'idée, les composants se rendent dans cet état sans se poser de question de avant/pendant/après. Cela apporte un gain de maintenance sur les composants en déportant pas mal de logique sur redux. Avec react, le mécanisme de souscription/ désabonnement du store est quasi transparente, ce qui simplifie le tout.
- la lourdeur d'écriture de redux peut énormément être amoindrie avec des libs : exemple redux toolkit ou rematch.
- redux vient avec son lot de complexité pour les effets de bords (appels de services par exemple) et les nombreuses lib comme redux-saga , redux-thunk, redux-observable, .... Ce n'est probablement pas une bonne idée sur un petit projet.
Bref, c'est un bon outil qui peut avoir du sens dans un projet angular mais qui nécessite du temps pour bien être apprivoisé.
Je rajouterai que ce n'est pas une nécessité de gérer tout l'état de l'application au sein de redux. Certains états locaux peuvent avoir du sens comme la gestion des formulaires. Cela dépend du besoin mais cela peut être une mauvaise idée de tomber dans l'excès du "tout redux"
Cela n'a pas de sens de comparé Redux à un service Angular.
Un service Angular est juste une classe pour factoriser du code et qu'on peux y accéder facilement via l'injection de dépendance. Dans certain cas, on l'utilise aussi pour partager des state à plusieurs composants, mais c'est pas propre au service, on est plus dans des fonctionnalités rxjs comme Subject, ...
Quant'à redux, c'est ce qu'on appel un gestionnaire d'état ou state management. Inspiré de l'architecture Flux de facebook et se base sur 3 principes: Single source of truth, immutable state, pure function reducer. Redux est sensé être framework agnostic, cad qu'elle ne dépend d'un framework, mais une des implémentation le plus populaire dans le monde de Angular c'est Ngrx.
SVP quel est cet éditeur de texte ?
Bon comme toujours j'ai une question et j'arrive pas a trouver une explication correcte && digeste bammm Grafikart en a fait une video :3
Un tuto sur mobx
Une vidéo sur Redux toolkit pour bientôt ?
C'est peu être bête ce que je dit ; maïs on peut remplacer Redux par le hook usereducer ??
Redux offre plus de fonctionnalité que le reducer fournit par React (surtout sur l'aspect mémoisation des composants qu'il connecte). Mais il est tout à fait possible de se créer un truc à peu près équivalent sur la base du useReducer.
Note: j'ai édité ma réponse car j'avais répondu à côté de la plaque.
----
UseReducer est utile pour un état local mais ne permet pas de partager la donnée à travers une hiérarchie de composants facilement. Redux permet d'accéder à des données un peu n'importe où dans l'application sans faire du "props drilling".
Pour redux il existe des hooks :
useSelector et useDispatch et cela fonctionne très bien. Plus la peine d'utiliser le high order component que je trouve assez difficile à appréhender.
Pour la gestion de la memoization avec redux, demon point de vue, il est préférable de gérer ça sur les sélecteurs avec une bibliothèque comme reselect. En tout cas, de mon expérience personnel, je préfère largement les hooks.
Ce qui est dommage c'est que les sélecteurs sont essentiels pour redux afin de s'affranchir de la donnée brute et de l'arborescence dans le store (facilite les refactorisations); Cependant ils ne sont pas mis en avant au premier abord dans la documentation officielle 😓
@@grafikart j'avais répondu avant d'avoir vu la vidéo. J'ai vu que tu parlais de ces notions là, beau boulot pour ceux qui veulent apprendre :)
Un tuto sur le python serai la bienvenue😂😅
First !
les gens quelqu'un peut partager le code source de cette vidéo avec moi ?
Sur le site l'abonnement
premium coûte 5€ par mois (sans engagement) et te permet de télécharger les sources.
Comme Vuex dans vuejs
quand même c'est vraiment indigeste le reactjs
oui surtout quand on l'aborde ainsi. IL y a plus simple.
Trop compliqué ce redux...
vous êtes peut-être un peu trop rapide lors de vos explications