Zustand : La MEILLEUR librairie de state Management en React

Поделиться
HTML-код
  • Опубликовано: 18 ноя 2024

Комментарии • 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 :)

  • @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

  • @hamsddxn
    @hamsddxn 11 месяцев назад

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

  • @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

  • @MartinRatinaud
    @MartinRatinaud Год назад

    Top video, bravo et je commence zustand direct !

  • @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

  • @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.

  • @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

  • @AhmedIbrahim-nk1fd
    @AhmedIbrahim-nk1fd 10 месяцев назад

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

    • @melvynxdev
      @melvynxdev  10 месяцев назад

      Hello, c'est excalidraw

  • @adnane331
    @adnane331 Год назад +1

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

  • @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

  • @horizon3963
    @horizon3963 Год назад

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

  • @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.

  • @gausoft
    @gausoft Год назад

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

    • @melvynxdev
      @melvynxdev  Год назад

      Pleins de store qui font des petit trucs

  • @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.

  • @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

  • @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 :)

  • @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 !

  • @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

  • @wagabeatz9604
    @wagabeatz9604 Год назад

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

  • @th3f0r31gn3r
    @th3f0r31gn3r Год назад

    Ma librairie préférée ❤

  • @djepgangngongangandrekevin568
    @djepgangngongangandrekevin568 7 месяцев назад

    Top

  • @theodubois5884
    @theodubois5884 Год назад

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

  • @yam-kingdev598
    @yam-kingdev598 Год назад

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

  • @moneyfr
    @moneyfr Год назад

    ça ressemble a du solidjs

    • @melvynxdev
      @melvynxdev  Год назад

      SolidJS ressemble à React plus que l'inverse

  • @Negatif34
    @Negatif34 8 месяцев назад

    React context API 🫳🎤

    • @melvynxdev
      @melvynxdev  8 месяцев назад

      non non moins bien

  • @ovna
    @ovna 7 месяцев назад

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

    • @melvynxdev
      @melvynxdev  7 месяцев назад

      Depuis il y en as moins

  • @jaja7902-r7p
    @jaja7902-r7p 8 месяцев назад

    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  8 месяцев назад

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

    • @not82
      @not82 6 месяцев назад

      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 6 месяцев назад

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