Тёмный

Zustand React State Management Course (Simple Redux Alternative) 

freeCodeCamp.org
Подписаться 10 млн
Просмотров 124 тыс.
50% 1

Опубликовано:

 

25 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 116   
@NiklasZiermann
@NiklasZiermann Год назад
Once again, thank you for giving me the opportunity to post this course to the channel. I'm really happy to already see so many people appreciating it! Have a good day y'all :)
@eduardalbrecht9585
@eduardalbrecht9585 Год назад
Hast du richtig gut gemacht 👌
@NiklasZiermann
@NiklasZiermann Год назад
@@eduardalbrecht9585 Danke dir 😄
@keenanduplessis3023
@keenanduplessis3023 Год назад
Great Course ❤‍🔥
@deumolo
@deumolo Год назад
You have a gift for teaching, man ... please continue with it. This was an incredibly good tutorial. Thank you.
@NiklasZiermann
@NiklasZiermann Год назад
Update: If you stumble across some issues with the bit about equality functions, then you should probably be checking out the createWithEqualityFn function from version 4.4.0 and up. Because the way to do it that I used in the course is now deprecated.
@kiddhkane
@kiddhkane 3 месяца назад
I like how you iterate steps, starting from very basic to more and more advanced, instead of doing a whole task in one go. It really helps see the necessary steps and debug.
@ONealOmbu
@ONealOmbu Год назад
After 2 months, I'm glad to see there's an expanded video on Zustand. Now I can continue building my e-commerce application but please next time focus on the topic. You took longer time focusing on styling which wasn't necessary. Thanks.
@jwhubert91
@jwhubert91 Год назад
So awesome that this was uploaded on the same day I was looking for it! Really looking forward to something easier to use than Redux- React is overdue for something hooks based that doesn't involve a lot of boilerplate template junk code just to get running
@AleksandarZedi
@AleksandarZedi Год назад
quick, simple. efficient, straight to the point, great video
@Tyrone-Ward
@Tyrone-Ward Месяц назад
😂😂😂
@tableryu7557
@tableryu7557 Месяц назад
Thanks for the Zustand and CSS tutorial 💙
@tonykharioki6913
@tonykharioki6913 Год назад
this is so cool. I'm building a react native app and I needed a better option than context and thank you for this. this really helped me.
@soumadip_banerjee
@soumadip_banerjee Год назад
Ein Deutscher! Wow.. Toll! Ich komme aus Indien, aber ich versuche Deutsch zum lernen.. Es ist nicht einfach, but, eehh.. es geht! Super Tutorial! 👌🏻 🇮🇳❣️🇩🇪
@NiklasZiermann
@NiklasZiermann Год назад
Danke dir! Viel Erfolg beim Deutsch lernen 😃
@soumadip_banerjee
@soumadip_banerjee Год назад
@@NiklasZiermann 😁
@user-gm3lg8gp3m
@user-gm3lg8gp3m Год назад
"The Why Zustand?" section was brilliant.
@ROVAKAN
@ROVAKAN Год назад
i was expecting a zustand tutorial but this guy keeps writing css :D
@FunctionGermany
@FunctionGermany Год назад
6:35 "shadow DOM" is a browser API which is not what React uses. the correct name is virtual DOM or VDOM. Vue uses it too.
@Hizbullla
@Hizbullla Год назад
Virtual DOM isn't an official term. Even the React team is hesitant to call it that and wants to move away from that terminology.
@FunctionGermany
@FunctionGermany Год назад
@@Hizbullla you're probably technically correct, but VDOM is currently the commonly known and used term for this approach. it's definitely much "more correct" than shadow DOM, which something completely different 😄
@jasonadventure2265
@jasonadventure2265 Год назад
Thanks a lot for your presentaion, from your video I can understand and drive zustand to manage the react state. From my understanding, it generates a private memory area in the brower side where various types of object and values as well as function can be operated in this memory block. and It can be accessed by outside components. very good job Niklas.
@iamjustlearner5866
@iamjustlearner5866 11 месяцев назад
great demonstration in the real case!
@mahdimey4990
@mahdimey4990 5 месяцев назад
nice css tutorial👍
@swadeshswaroopbehera8465
@swadeshswaroopbehera8465 6 месяцев назад
I was worried looking at redux boilerplate, pheww. Thanks mate.
@miraclenerdkidchiki6249
@miraclenerdkidchiki6249 Год назад
This came at the right time....just started looking at zustand yesterday
@DarrylHebbes
@DarrylHebbes Год назад
Thank you for pronouncing Zustand correctly 😂
@krismondevv7356
@krismondevv7356 Год назад
I watch a lot of tutorials and please when you want to show an exact technology prepare your css before the tutorial,,
@rune3pro
@rune3pro Год назад
I agree. I don't care about CSS, I'm here to learn about zustand
@martygo
@martygo 8 месяцев назад
Thank you for course.
@AL-rb7ku
@AL-rb7ku Год назад
this is a gold mine thank you!!
@migaratennakoon5439
@migaratennakoon5439 9 месяцев назад
great job
@baldcoder_
@baldcoder_ Год назад
I wonder if not using a Provider can be considered a pro. Without a Provider you can't reuse the same instance of a store for a different part of the app. There's already an issue and a StackOverflow question about lacking that ability in Zustand. It's also not faster than Context per se. It's faster than a Context that passes state to all consumers. It's very simple to create a smarter context that allows selective reacting that Zustand (and other libraries) feature. Zustand is awesome, but I feel like people keep missing out on the power of Context. I think I'll write an abstraction just to show how powerful it is 😅
@s1n7ax
@s1n7ax 4 месяца назад
Awesome tutorial
@kevinkimutai1328
@kevinkimutai1328 Год назад
Very nice tutorial.A little confusing though on why you chose to name the tasks object as title and state. status would be a less confusing name
@fallen_turbo
@fallen_turbo Год назад
Amazing Video, I would love to see one for Jotai as well with Jack Harrington
@danypell2517
@danypell2517 Год назад
The best state lib
@tucson29
@tucson29 Год назад
This helps me a lot, thx
@abubakarafzal9707
@abubakarafzal9707 Год назад
really comprehensive video, Effort much appreciated.
@binukbe4401
@binukbe4401 Год назад
This tutorial needs another tutorial tbh 😕
@siriusplayz5871
@siriusplayz5871 Год назад
This is so cool. Thank you 👍
@jasper5016
@jasper5016 Год назад
Thanks, Niklas, you are a fantastic teacher. I would love to learn more from you. Do you have any Udemy course?
@Viva-07
@Viva-07 9 месяцев назад
Seems more like css video than zustand...but when the concept was edplained, it was good Thank you
@kolserdav
@kolserdav Год назад
Oh, that's fantastic, down with the redux!
@budaloops
@budaloops Год назад
Am I the only one who's confused with this explanation?
@Jahid20u
@Jahid20u 4 месяца назад
no, bro. count me in. This tutorial maybe not for beginner
@pandastory-abookseriesabou8568
​👌🏻​ Good as always 🚀​
@lored6811
@lored6811 Год назад
As a German I have to say that you should look up how to say Zustand
@soumadip_banerjee
@soumadip_banerjee Год назад
Genau! Das tut mir leid
@TheAleBecker
@TheAleBecker Год назад
This
@ibtissamelhammoumy4887
@ibtissamelhammoumy4887 Год назад
🤣🤣🤣
@zm7985
@zm7985 Год назад
Tsu-shtund
@thevloglife105
@thevloglife105 Год назад
it will be sure to use vite react, right?
@giannifed
@giannifed Год назад
Great Tutorial.
@vidadoempreendedor2909
@vidadoempreendedor2909 Год назад
Thanks for the work
@yllimdanny
@yllimdanny Год назад
i used to learn a very simple way to use zustand, your way seems making things complicated. Maybe your way is too advance level for me.
@0xtz_
@0xtz_ Год назад
I need this 😮 thanks
@NehalDamania
@NehalDamania 11 месяцев назад
Nice Tutorial, Can we create similar tutorial on Jotai and a comparison of Both. Will be really helpful
@idunexist
@idunexist Год назад
no offense, but i think it spends a lot of time writing css............not ideal for the impatient
@bonganintshangase6051
@bonganintshangase6051 Год назад
Greate tutoral but it would be nice to leave if you left out the css and just focus on zustand.
@SHARMATUSHAR1_
@SHARMATUSHAR1_ Год назад
21:20 Soon after adding shallow. It says useStore is deprecated?
@jcubic
@jcubic Год назад
You should not use Shadow DOM if you mean Virtual DOM. Shadow DOM is Browser API and part of Web Components.
@ShubhamHirap
@ShubhamHirap 9 дней назад
addTask unit test case failed tried many things and follow line by line code from the video too. How it is working in the video?
@new_artiko
@new_artiko Год назад
thanks!
@moon911x
@moon911x Год назад
thanks a lot 🎉
@jwoods9659
@jwoods9659 Год назад
I'm learning code I'm picking up patterns and what to do fast BUT I really don't know the words to type all the time....its tough
@ak-loz
@ak-loz Год назад
Timestamps please :)
@justine10997
@justine10997 2 месяца назад
I needed a quick solution to learn Zustand and I had to give up after battling with CSS for 45 minutes (first time I actually watch a tutorial in x0.75). The tutorial is good and I believe there is a lot of work behind. Just not a Zustand course.
@maid768
@maid768 Год назад
Endlich ein Deutscher
@NiklasZiermann
@NiklasZiermann Год назад
Die Freude ist ganz meinerseits :)
@khoroshoigra8388
@khoroshoigra8388 Год назад
why not typescript ?
@simpsomk
@simpsomk 9 месяцев назад
Good but you should read what shadow DOM is
@kuldeepbhatt8475
@kuldeepbhatt8475 Год назад
MAH, MAAN! Just made fookin Trello from scratch! LMAO!! rad skills!!
@imadajail3818
@imadajail3818 Год назад
Ty ❤
@siriusplayz5871
@siriusplayz5871 Год назад
I'm going to create my TODO app next using this course and firebase
@blue_berry_pie64
@blue_berry_pie64 Год назад
Yayyyy🎉🎉🎉🎉🎉🎉
@tejasgk369
@tejasgk369 Год назад
🔥
@alexandershpilka5848
@alexandershpilka5848 Год назад
Nice tutorial in general but a bit chaotic.
@evolutionxbox
@evolutionxbox 8 месяцев назад
Consider not using margin on flex children to space them evenly. Use gap.
@blubblurb
@blubblurb Год назад
In the tutorial @22:26, evluating longest and then go over every element to see whether it exists is a bit slow. Just return false directly when the length of both elements differ.
@mikelan9854
@mikelan9854 Год назад
what about if they have different values ?
@blubblurb
@blubblurb Год назад
​@@mikelan9854 You go over all the elements then if the length is the same. But you don't have to if the size already differs.
@NeoCoding
@NeoCoding Год назад
thanx good try but no need in styling here and why to call a variable state, it's confusing cuz state is reserved in redux ex
@surajkumarsingh4857
@surajkumarsingh4857 Год назад
WOW
@joovitor
@joovitor 7 месяцев назад
@25:29 what does he uses for the error appear on the line it ocurrered?
@НаильШайхинуров-п7л
@НаильШайхинуров-п7л 7 месяцев назад
It's Error Lens extention by Alexander
@rishiraj2548
@rishiraj2548 Год назад
👍👍
@krish-Ach
@krish-Ach Год назад
Can a browser db like watermelon db be used instead of state management in react
@rohulahadi3990
@rohulahadi3990 Год назад
🔥😍
@polisvlogs2471
@polisvlogs2471 Год назад
👍🏼👍🏼👍🏼
@RewlTheNoob
@RewlTheNoob Месяц назад
You really should have used a CSS library. And it wasn't a good choice to call "status" as "state", because it's confusing in a State Management course, especially since in Redux a lot of boilerplate prop was called "state". Besides that it wasn't a bad course, but it could be better.
@dimitrisoikonomou6081
@dimitrisoikonomou6081 17 дней назад
Totally agree. You should use "status". The prev course I watched was about rtk and was confused in the beginning. Besides that good course
@doslki6773
@doslki6773 Год назад
please make a course for game maker
@juliamax7519
@juliamax7519 Год назад
23:03 Here is the source, I don't think it was possible for it to have been written that way at the time. ```ts // ... ignore const keysA = Object.keys(objA) if (keysA.length !== Object.keys(objB).length) { return false } for (let i = 0; i < keysA.length; i++) { if ( !Object.prototype.hasOwnProperty.call(objB, keysA[i] as string) || !Object.is(objA[keysA[i] as keyof T], objB[keysA[i] as keyof T]) ) { return false } } return true ```
@afaqahmad8918
@afaqahmad8918 Год назад
First view ❤
@usamaashraf4930
@usamaashraf4930 Месяц назад
Zustand 10% css 90%
@BlueBear13
@BlueBear13 Год назад
Bear
@ישיקוסובר
@ישיקוסובר Год назад
Plese meka chaybot in pythun
@okkkk88612
@okkkk88612 Год назад
too fast, too much css, a little bit messy tutorial
@elidonmorina
@elidonmorina Год назад
Very poor demonstration of Zustand! If I was too see Zustand for the first time from this guy I would had never have used it!
@mikelan9854
@mikelan9854 Год назад
i was just seeing zustand for the first time and wanted to not learn it anymore . Thank you , i'll now look for something simple and better than a chaotic css tutorial.
@kshitijvengurlekar1192
@kshitijvengurlekar1192 Год назад
Not a very intutive explanation
@aleejunaid
@aleejunaid Год назад
You lost me at "Javascript" .... 😐
@ICallBullTV
@ICallBullTV Год назад
Here because context providers ruined my day
@maxcelosdev
@maxcelosdev Год назад
Why waste so much time in styling? Its a state management tutorial...
@jarenburks1515
@jarenburks1515 Год назад
Too much CSS
@AleksandarZedi
@AleksandarZedi Год назад
if you get error: "TypeError: Cannot convert undefined or null to object" use this import "import * as matchers from '@testing-library/jest-dom/matchers';"
@codexperience7951
@codexperience7951 Год назад
I have this problem, in unit testing with vitest, can someone explain or provide a solution for this, this is the error. Sorry just a first timer in unit testing. TypeError: Cannot convert undefined or null to object ❯ setupTests.js:6:8 4| import "@testing-library/jest-dom"; 5| 6| expect.extend(matchers); | ^ 7| 8| afterEach(cleanup);
@AleksandarZedi
@AleksandarZedi Год назад
import * as matchers from '@testing-library/jest-dom/matchers'; this fixed it for me
@Vishal_0841
@Vishal_0841 Год назад
Freecodecamp 🤝 student❤
@allsunday1485
@allsunday1485 Год назад
The styling is a waste of time
Далее
Zustand - Complete Tutorial
19:27
Просмотров 96 тыс.
State Managers Are Making Your Code Worse In React
13:33
новое испытание
00:40
Просмотров 91 тыс.
10 React Antipatterns to Avoid - Code This, Not That!
8:55
React State Management with Zustand & TypeScript
1:04:35
Просмотров 3,5 тыс.
Global State Management in NextJs 14 Using Zustand
51:17
Why Everyone Loves Zustand
29:27
Просмотров 98 тыс.
Why Signals Are Better Than React Hooks
16:30
Просмотров 483 тыс.