Zustand : La MEILLEUR librairie de state Management en React

แชร์
ฝัง
  • เผยแพร่เมื่อ 23 ม.ค. 2025

ความคิดเห็น • 78

  • @pxlsyl4644
    @pxlsyl4644 ปีที่แล้ว +1

    C'est exactement ce que j'utilise pour mes modals en ayant trouvé des exemples sur github il y a quelques mois, en autodidacte complet (et sans avoir appris redux quoi), et ça m'a permis d'éviter les prises de tête :)

  • @hamsddxn
    @hamsddxn ปีที่แล้ว

    Wtfff,
    Je vais refactor direct mon code
    Très belle vidéo

  • @Saiintss7
    @Saiintss7 ปีที่แล้ว +1

    Très bonne librairie Zustand. Simple d'utilisation et très légère. Peut être la meilleure pour le state management React a l'heure actuelle

    • @melvynxdev
      @melvynxdev  ปีที่แล้ว +1

      Je suis totalement d'accord

  • @josephjoberno
    @josephjoberno ปีที่แล้ว +2

    Moi j’utilise recoil il est supporter par meta, que pensez vous ce cette librairie? je l’utilise partout react/React-native également tanstack.

    • @maxwebstudio
      @maxwebstudio ปีที่แล้ว

      Super librairie aussi

    • @melvynxdev
      @melvynxdev  ปีที่แล้ว

      librairie cool mais à voir la taille du projet et des besoins

    • @josephjoberno
      @josephjoberno ปีที่แล้ว

      @@melvynxdev qu’entendez-vous par la taille du projet?? J’ai pas trop compris pouvez-vous m’éclairer la dessus ??? Svp

    • @mykus1000
      @mykus1000 ปีที่แล้ว

      Jotai vient de recoil

  • @MartinRatinaud
    @MartinRatinaud ปีที่แล้ว

    Top video, bravo et je commence zustand direct !

  • @adnane331
    @adnane331 ปีที่แล้ว +1

    Tu pourrais assez rapidement diviser ton MessageStore en slices et le rendre plus lisible non ?

    • @melvynxdev
      @melvynxdev  ปีที่แล้ว

      On peut tout faire

  • @tommysaucey6095
    @tommysaucey6095 ปีที่แล้ว

    Hello, superbe vidéo bien intéressante !
    Tu penses qu'il faut intégrer zustand à quel moment ? Sur une gestion de state local à un component les useState natif sont suffisant, zustand vient uniquement en remplacement du prop drilling du coup c'est ça ?

    • @melvynxdev
      @melvynxdev  ปีที่แล้ว +2

      Il faut l'intégrer si tu as des states globaux, qui ne sont pas local à un endroit en gros et que tu souhaites partager dans tout le lifetime de ton application

    • @tommysaucey6095
      @tommysaucey6095 ปีที่แล้ว

      @@melvynxdev top merci

  • @horizon3963
    @horizon3963 ปีที่แล้ว

    woww, je suis conquis je le prend direct cette lib et je m'abonne direct lol.

    • @melvynxdev
      @melvynxdev  ปีที่แล้ว

      ahah merci beaucoup !

  • @MaximeOnDev
    @MaximeOnDev ปีที่แล้ว +1

    Intéressant ! Parcontre pour etre dans la meme dynamique que nodejs / bun.
    Redux est hyper utilisé et deja intégrés dans beaucoup de projets, non ? Donc vaut mieux apprendre redux ?

    • @maxwebstudio
      @maxwebstudio ปีที่แล้ว

      Redux est plus lourd et plus complexe. Je te recommande Redux RTK, qui aura une implementation similaire à Zustand. Sauf qu'il faudra 'Wrapper' ton appli avec un Provider et passer le store en prop. Ca reste toute fois plus lours en poids et en ligne de code et utilisation que Zustand,

    • @MaximeOnDev
      @MaximeOnDev ปีที่แล้ว

      @@maxwebstudio Oui j'ai déjà fait un projet avec redux toolkit + Addon rtk. Ma question était juste sur le fait que redux est utilisé en entreprise. Donc il ne faut pas le mettre à la poubelle ( enfin je suppose , je vois pas mal d'offres d'emploi qui demande redux)
      PS: (redux rtk c'est pour gérer les api, tu veux dire redux toolkit ? )

    • @melvynxdev
      @melvynxdev  ปีที่แล้ว +1

      Non car Redux implémente un pattern complexe qui n'est plus pertinent maintenant, le pattern de flux, dispatch, event etc...
      Je trouve que ce pattern rend le code verbeux pour pas grand chose dans beaucoup de projets et il est fait pour gérer des state très liée, qui interagissent et fonctionne entre eux (aka mes vidéos sur le sujet)

    • @maxwebstudio
      @maxwebstudio ปีที่แล้ว +1

      @@MaximeOnDev Oui RTK pour Redux Toolkit. C'est bien de le connaitre. Mais perso si on ne me l'impose pas, je ne pense pas le réutiliser pour le moment...
      Comme le dit @melvynxdev, c'est beaucoup trop verbeux.

  • @ndekocode
    @ndekocode ปีที่แล้ว +1

    Tout n'est pas à mettre à la poubelle pour suivre les tendances, car il y a des entreprises qui l'utilisent. Tu en as même parlé dans ta vidéo sur Bun.

    • @melvynxdev
      @melvynxdev  ปีที่แล้ว

      ?? Zustand n'est pas une tendance

  • @victorsalomon2552
    @victorsalomon2552 ปีที่แล้ว

    Hello Melvyn, merci pour la vidéo !
    Tu peux en dire plus sur la manière dont tu gères "une session" d'un user? Genre pour chat2code, tu utilises le persist store de zustand (local storage?) ou tu fais autrement? Merci :)

    • @melvynxdev
      @melvynxdev  ปีที่แล้ว

      Hello, oui les config par exemple sont persister dans le local storage

  • @azonesa2384
    @azonesa2384 ปีที่แล้ว

    Personnellement je suis pas très accrocheur de zustand, en tout cas je suis beaucoup plus à l'aise avec redux, mais cela voudrais dire que si je veux fetch les données de mon serveur je dois utiliser zustand et react query ?

    • @gausoft
      @gausoft ปีที่แล้ว

      Redux dispose RTK Query (comme addon) qui fait à 80% ce que fait React Query

    • @melvynxdev
      @melvynxdev  ปีที่แล้ว +1

      non mais React Query est 100x mieux xD
      Pour moi Redux résout pas le même problème que React Query, aka toutes mes autres vidéos

    • @adnane331
      @adnane331 ปีที่แล้ว

      React-Query est un state manager de la donnée que tu fetch via axios, fetch etc... Donc tu pourrais utiliser que react query si tu voulais :)

  • @Trinita1970
    @Trinita1970 ปีที่แล้ว +1

    C'est bizarre que React n'intègre pas un Store nativement. Ce genre de système existe dans Vuex et Redux depuis plusieurs années.

    • @belmo_
      @belmo_ ปีที่แล้ว +2

      Moi aussi, je n'ai jamais compris pourquoi.

    • @melvynxdev
      @melvynxdev  ปีที่แล้ว +5

      Le but de React n'est pas de proposer des outils tels que des stores, du routing, etc. Ils offrent des primitives qui permettent à la communauté de créer des choses. Si React proposait un store, comme VueX, les gens seraient peut-être moins tentés de créer des projets aussi bien faits. La concurrence est la clé pour créer des librairies incroyables, comme on l'a vu avec TanStack, etc.

    • @maxwebstudio
      @maxwebstudio ปีที่แล้ว

      React laisse la liberté de choisir ses outils. Cependant tu peux créer un store en utilise les React Contexte. C'est lourd en implementation, mais ca fonctionne pareil.

  • @Azer_Oner
    @Azer_Oner ปีที่แล้ว

    Possède-t-il un système de pertinence des données ?

    • @melvynxdev
      @melvynxdev  ปีที่แล้ว +1

      tu peux le save dans le local storage oui !

  • @AhmedIbrahim-nk1fd
    @AhmedIbrahim-nk1fd ปีที่แล้ว

    C’est quelle application que tu utilises pour la présentation ? Sinon très bonne vidéo

    • @melvynxdev
      @melvynxdev  ปีที่แล้ว

      Hello, c'est excalidraw

  • @mykus1000
    @mykus1000 ปีที่แล้ว +1

    Moi j'utilise jotai. Mon choix départ était zustand mais ça systaxe m'avais fatigué j'avais l'impression de rien comprendre alors j'ai pris jotai il est tout petit mais il fait son boulot.

    • @maxwebstudio
      @maxwebstudio ปีที่แล้ว +1

      Je trouve la syntaxe de Zustand plus simple que Jotai perso..

    • @melvynxdev
      @melvynxdev  ปีที่แล้ว +1

      Jotai c'est sympa aussi mais j'ai jamais réussi à m'y mettre.

    • @mykus1000
      @mykus1000 ปีที่แล้ว +1

      @@maxwebstudio jotai c'est facile de faire du désordre mais je le trouve simple à utilisé mais je vais revoir zustand. Melvyn a simplifier ça.

    • @melvynxdev
      @melvynxdev  ปีที่แล้ว

      ahah au plaisir

  • @boristherin4104
    @boristherin4104 ปีที่แล้ว

    c'est vrai c'est bcp plus simple qu'un redux store & ses reducers. et puis redux, quand tu debute, t'as beau proposer du code fonctionnel, on te retourne que tant tu "n'embrasses" pas Redux dans sa totale maitrise, mieux vaut eviter.
    j'espere que cette librairie pourra "bipass" ce mur :D

    • @melvynxdev
      @melvynxdev  ปีที่แล้ว

      Ahaha exactement, c'est surtout que zustand ne suit pas le pattern de "flux" proposer par Redux. Mais c'est peut-être une vidéo à faire.

  • @th3f0r31gn3r
    @th3f0r31gn3r ปีที่แล้ว

    Ma librairie préférée ❤

  • @wagabeatz9604
    @wagabeatz9604 ปีที่แล้ว

    Salut melvynx tu peux nous faire une vidéo sur locomotive Scroll avec react

  • @jaja7902-r7p
    @jaja7902-r7p 10 หลายเดือนก่อน

    De mon côté, lorsque je fais appel a un store dans un de mes composants de cette façon :
    (...)case 200:
    cookieMan.addCookie("token", response.data[0]);
    store((state) => state.updateRefreshToken(response.data[1]));
    setAccess(response.data[0]);
    setRefresh(response.data[1]);
    (...)
    j'obtiens ceci : "Error: Invalid hook call. Hooks can only be called inside of the body of a function component."
    L'outil ne semble pas pouvoir s'utiliser de partout

    • @melvynxdev
      @melvynxdev  10 หลายเดือนก่อน

      hello, avec ton code je ne peux pas vraiment review toutes les informations

    • @not82
      @not82 8 หลายเดือนก่อน

      Je pense que ça vient du fait que tu ne peux pas utiliser des hooks react dans un store Zustand ( setAccess, setRefresh semblent être des useState, donc des hooks React )

    • @jaja7902-r7p
      @jaja7902-r7p 8 หลายเดือนก่อน

      @@not82 je devais declarer ma paire {refreshToken, updateRefreshToken} = storeToken() a la maniere d'un useState. ca fonctionne bien :)

  • @gausoft
    @gausoft ปีที่แล้ว

    Interessant, ça pourrait ressembler à quoi dans un grand projet ?

    • @melvynxdev
      @melvynxdev  ปีที่แล้ว

      Pleins de store qui font des petit trucs

  • @mathieucampani5023
    @mathieucampani5023 ปีที่แล้ว +1

    en tant que dev vuejs, je bois mon café ☕

    • @melvynxdev
      @melvynxdev  ปีที่แล้ว

      tu bois ton vuex

    • @tcsagadev1653
      @tcsagadev1653 ปีที่แล้ว

      ​@@melvynxdevDésormais connu sous le nom de pinia

    • @mathieucampani5023
      @mathieucampani5023 ปีที่แล้ว

      vuex et pinia son deux projet différent mais par contre oui, pinia et l'actuel store système de vue 3 ! @@tcsagadev1653

    • @mathieucampani5023
      @mathieucampani5023 ปีที่แล้ว

      je bois plus tôt une pinia-colada @@melvynxdev

    • @melvynxdev
      @melvynxdev  ปีที่แล้ว

      ahah génial

  • @djepgangngongangandrekevin568
    @djepgangngongangandrekevin568 9 หลายเดือนก่อน

    Top

    • @melvynxdev
      @melvynxdev  9 หลายเดือนก่อน

      merci

  • @theodubois5884
    @theodubois5884 ปีที่แล้ว

    Sinon t'as les atoms jotai c'est pas mal non plus

  • @yam-king-dev
    @yam-king-dev ปีที่แล้ว

    perso j’utilise redux pour la persistance uniquement dans RN mais c’est deja trop verbeux. je Valide Zustand

    • @melvynxdev
      @melvynxdev  ปีที่แล้ว

      ah oui je comprends !

  • @moneyfr
    @moneyfr ปีที่แล้ว

    ça ressemble a du solidjs

    • @melvynxdev
      @melvynxdev  ปีที่แล้ว

      SolidJS ressemble à React plus que l'inverse

  • @Negatif34
    @Negatif34 10 หลายเดือนก่อน

    React context API 🫳🎤

    • @melvynxdev
      @melvynxdev  10 หลายเดือนก่อน

      non non moins bien

  • @ovna
    @ovna 9 หลายเดือนก่อน

    Horrible la musique de fond ☠️ ce serait mieux sans rien. Bonne explication sinon

    • @melvynxdev
      @melvynxdev  9 หลายเดือนก่อน

      Depuis il y en as moins