UTILISER RXJS POUR VOS COMPOSANTS REACT !

⭐ DECOUVRE MA FORMATION ANGULAR : learn.web-develop.me/angular-...
🔥 REJOINS NOUS SUR TWITCH : / liior
📧 INCRIVEZ VOUS A MA NEWSLETTER : eepurl.com/gZ0LEH
▶ Dans cette vidéo, on découvre comment RxJS peut nous aider à travailler sur la communication entre les composants dans une application React !
▶ Lien du dépôt GitHub : github.com/liorchamla/cours-r...
〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰
😺 RETROUVEZ MOI ICI LES BROS
〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰〰
Twitch : / liior
Twitter : / liiorc
LinkedIn : / lior-chamla
Discord : / discord
CodePen : codepen.io/liorchamla/
☕ Si tu veux me soutenir, paye moi un café 😁💓 : www.buymeacoffee.com/LiorChamla

[@papesambakasse422]

Vous êtes le meilleur enseignant que j'ai jamais vu de ma vie, l'explication, la clarté et la pédagogie de vos cours sont incroyables

[@LiorCHAMLA]

Merci beaucoup Pape !

[@CyrilTonneville]

C'est franchement incroyable d'être aussi pédagogue! Les explications que tu donnes sont hyper claire! Merci (encore) pour ce que tu produis et partage. PS: pas besoin de t'excuser pour les explications, elles sont toujours bienvenues!

[@amisifikirini8412]

Salut Lior, Vous avez une approche pédagogique très simple, claire et explicite. J'apprécie beaucoup votre manière de faire. Vraiment merci

[@LiorCHAMLA]

Merci beaucoup :)

[@jean-bernardsaint-eve3340]

Merci pour ce tuto. Et voilà la lib RXJS remise au goût du jour. J'avais jeté un oeil à Rxjs il y a quelques temps, mais comme il n'y avait plus de tuto sur le sujet depuis 3 ans, j'avais laissé tomber. Merci pour ce tuto sur la programmation réactive et son utilité dans React.

[@LiorCHAMLA]

Merci à toi :)

[@bricelyonelnguetsop7129]

Merci pour ton partage

[@axelraboit5556]

Super video Lior comme toujours, très bien expliqué. Et concernant les petits rappel ou les petits exemple pour bien faire comprendre, ne t'excuse pas... je dirais meme continue car c'est très pertinent ! Merci :)

[@LiorCHAMLA]

Merci beaucoup Axel :)

[@bergall]

Fantastique :D ! merci pour cette vidéo cette solution me semble plus simple encore que redux toolkit

[@LiorCHAMLA]

Merci beaucoup :)

[@apprendrelibrementlaprogra596]

en tout cas jusqu'à 17:24 / 32:17 j'étais sur le point de dire rien ne change! je vois vous êtes très pédagogue. 💪 Nice Cours comme d'habitude.👍

[@LiorCHAMLA]

:p :p Merci !

[@BounSoft]

J'utilise RxJs avec react depuis le début avec des singletons, je suis fun de cette lib, j'ai jamais adhéré à redux, j'utilise RxJs avec Angular et react et franchement c'est top, excellente video.

[@LiorCHAMLA]

Merci !

[@bipbipbop2751]

Court et très clair

[@LiorCHAMLA]

Merci

[@borishelvas5547]

J’aime beaucoup ce que tu fais

[@LiorCHAMLA]

Merci :)

[@gnaris9220]

Un tueur

[@LiorCHAMLA]

Merci Gnaris !

[@marielauredebeaune1780]

Merci bcp pour ce super cours. avec le useEffect tu ne relances pas la fonction mais en même temps ton tableau de dépendances est vide.

[@drduck667]

T'es finalement décidé de revenir sur youtube on t'attendait

[@LiorCHAMLA]

Mais pour combien de temps encore ? :P

[@bycrea]

J'ai regardé tes deux video (redux-toolkit et RXJS) et j'ai trop envie de me refaire une aplpi en react ! As-tu pour projet de nous faire une petite todo-list avec une api symfony? Je serais curieux de voir comment tu gères ta récupération / enregistrement de données, sûr et certain que tu as des petits tricks qui doivent être intéressants à connaitre :) Merci pour toutes ces vidéos c'est que-du-bon-heur !

[@LiorCHAMLA]

Salut Yoan, j'ai une formation de 15h sur Symfony Api Platform et React :) si ça te dit, elle est ici learn.web-develop.me :)

[@renscrab]

Il y a t'il une raison spécifique pour laquelle tu spread le tableau après l'avoir reçu par subscription, plutôt que le faire dans le .next([...]) ? Ca me parait être plus optimisé en terme d'espace mémoire (une seule nouvelle adresse) et ça évite d'avoir à systématiquement faire le spread dans tout les composants souscrivant à l'obs, mais il y a peut-être un autre aspect auquel je ne pense pas.

[@gabriel-bu3ys]

Hello Lior , très intéressante ta video, tu compte parler des test unitaire ou du TDD dans des videos avenir ? Merci

[@LiorCHAMLA]

C'est pas mon fort le TDD en React :) d'autres créateurs ont fait des vidéos sur le sujet ! Merci en tout cas :)

[@AI_Wonderland]

Superbe vidéo ! Il faut juste que je regarde les différences avec useContext. Direction la doc pour moi pour choisir l'un des deux :) ! Merci :)

[@apprendrelibrementlaprogra596]

Je crois RXJS est cool hain

[@LiorCHAMLA]

C'est le même "but", récupérer des infos dans les composants sans passer par les props :)

[@casho293]

Salut super vidéo, j'aimerais savoir quel pratique était le plus utilisé en entreprise entre Redux et RxJS ? J'aurais aussi aimé avoir ton avis sur l'utilisation de Redux avec RxJs ? Merci !

[@LiorCHAMLA]

C'est redux qui est le plus utilisé dans le monde react. Mais y a une librairie qui prend de l'ampleur et qui s'appelle redux observables et qui mélange les deux 😁

[@fasodev]

N'est-ce pas ce composant qui est au coeur de Angular ? Super ta vidéo. Pour le filtrage, on peut s'en passer du .task.done === false par !task.done. On peut également calculer le undoneTasks dans le hook et exporter tasks, undoneTasks.

[@LiorCHAMLA]

Et oui tout à fait ! Angular a choisi RxJS pour traiter toutes les tâches asyncrhones :)

[@michelgisenael4021]

Du coup quelle est la meilleur façon pour gérer le props drilling entre state management comme redux et l'obeservable comme rxjs; et à quel moment l'un ou l'autre est plus performant et optimisé

[@LiorCHAMLA]

Aucune idée Michel :p

[@yacinelyoubi9653]

Petite question comme ça à chaud ! Déja super vidéo, je vais vraiment essayer d'utliser le RXJS dans mes prochains projets pour factoriser mon code et éviter de passer par les props ! Donc ça marche sur du rR, mais est-ce que RXJS marche pour du React native aussi ?

[@LiorCHAMLA]

Ca marche pour n'importe quel projet utilisant du Javascript, et bien sur sur React Native aussi :)

[@yacinelyoubi9653]

@@LiorCHAMLA super merci ! T'es un goat

[@Azer_Oner]

Bonjour Lior, j’aimerais savoir du coup si c’est judicieux de remplacer totalement redux par rxjs. J’ai lu sur certains blog qu’ils ne faisaient pas la même chose mais pourtant je ne vois pas la différence dans leur utilisation, hormis la manière de coder. Peux-tu m’éclairer stp ?

[@LiorCHAMLA]

Ca n'a rien à voir, le but de Redux est de gérer des états (ensemble de données qui peuvent évoluer), le but de RxJS c'est juste de créer des signaux auxquels ont peut réagir :)

[@amisifikirini8412]

Je travails avec redux pour le système de login des utilisateurs avec des routes protégés. Mais avec la mise d'état fonctionne de manière asynchrone que je n'apprécie carrément pas. Avez-vous déjà expliquer ou travailler sur le système de login avec redux avec la gestion de message de connexion ou non dans le formulaire de login dont les données proviennent à partir d'un API avec axios ???

[@LiorCHAMLA]

Je vois pas vraiment où est le soucis ? Tu as un état Redux avec une propriété errorMessage, tu fais ta requête HTTP, si le login est mauvais tu dispatch une action qui dit que errorMessage = "Email ou password invalide" et ton composant de formulaire l'affiche :x

[@johnhaimez951]

Hello, j’ai une petite question, doit on utiliser rxjs-react ou rxjs tous cours ? Car j’ai l’impression que rxjs-react est extrêmement compliqué comparer à ce que tu as démontré. Alors j’aurais aimer avoir des avis, merci

[@LiorCHAMLA]

Bah si tu connais un peu RxJS tu devrais pas avoir de mal avec RxJS React, en gros c'est les outils RxJS mais avec des hooks pour t'aider à les utiliser sans te prendre la tête :x

[@mehdib8612]

T'as fait la mm chose avec redux ?!

[@mouadmahfoud2782]

est ce que c'est normale de ne pas fair unsubscribe ?

[@blokche_dev]

Le subscribe retourne une souscription qu'il est nécessaire de cancel (.unsubscribe) lorsque le composant est retiré du dom, effectivement. 👍

[@LiorCHAMLA]

Attention, ce n'est nécessaire QUE si le composant est susceptible d'être détruit à un moment ou un autre. Sans ça je vois pas l'intérêt d'unsubscribe :x

[@najmidev]

First

[@LiorCHAMLA]

bg !

[@messaoudiabdel1188]

J'arrive pas à comprendre l'utilité de rxjs en sachant que le hook useContext de react résou déjà ce problème

[@LiorCHAMLA]

Le contexte n'a pas été pensé pour gérer des opérations lourdes de mutations sur des gros états mais oui j'ai fait une vidéo pour montrer que ça faisait aussi le taff parfois :)

[@messaoudiabdel1188]

@@LiorCHAMLA merci de l'info lior, et je me suis renseigner aussi, l'inconvénient du context c'est qu'il fait un re-rendu de tout les composents qui l'utilise lorsque le context subit un update

[@IMBODavid]

Merci !

[@LiorCHAMLA]

Oooh merci à toi