Mastering Typescript State using Zustand
ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2024
- Continuing on with Typescript we are starting a series on React state management where we take the same To-Do list and implement it using a bunch of different state managers. This time we are looking at Zustand!
Zustand: zustand.surge.sh/
Starting code: github.com/jhe...
Finished code: github.com/jhe...
If you liked this video, buy me a coffee! www.buymeacoff...
Hope you folks enjoy this!
👉 If you enjoy this video, please like it and share it.
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Weekly free newsletter: www.jackherrin...
👉 Discord server signup: / discord
💢 Watch our other videos:
💟 Hacking your Github contribution graph: • Hacking Your Github Co...
💟 Build a KK Slider Slider: • Build A K K Slider Sli...
Thank you for watching this video, click the "SUBSCRIBE" button for stay connected with this channel.
Subscription Link: bit.ly/2E7drfJ
#reactjs #typescript
Unbelievable replacement for the nightmare redux boilerplates. Thanks man for this quick demo.
Man really love your work. I have been watching your videos over a week for Typescript and loved every videos for great explanation. Keep up the good work.
@Jack Herrington .. you are a champion ! . I have now started learning from the video before seeing the docs :-) and then reading them there after. Started on zustand and the first place to look for was your video ..
That rocket in the background is way to cool. Love your channel Jack. Such high-quality content. Can't wait to see more from you. See you soon my friend!
Wow - `cmd +k, cmd + i`
Thank you so much! I love your calming voice and teaching style. Subcribed 🤟🤟
Got me out of a pinch yet again. Thank you.
4:10 Uncle Jack? in Zustand we don't have to destructure the whole state inside our function, isn't it?
I think you're right, we don't need to destructure the object. My bad.
Yes, I think that a main difference from Redux
Love zustand. Thanks for introducing me to it. Also, very off-topic, I recently saw Richard Basehart on the old tv series Voyage to the Bottom of the Sea. I thought this guy must be jherr's dad!
Actually, yeah, in some ways my dad looked a lot like that guy.
Information in this video is really useful for me. thank you so much !!
Very nice intro to zustand in react for state management.
You make an awesome quality content. The voice is perfect 👌🏻
So Old Upload date....yet still using the Loving TS with zustand.....Where as others naturally uses JS 1year back......I neede Zustand in one of my project...had to be TS.....Thanks for the Rich Content......
Yours videos on react state mamagement and hooks made me subbed u .....Nice ones❤❤❤❤❤
This has to be one of your fastest state management crud+async video, I haven't even finished my coffee while watching this :) , do you have a poll to decide what you'll be using next? I'll vote for effector.
I'll check it out and maybe add it to the list. What do you like about it?
@@jherr their api makes it easier to do side effects, and the store + event paradigm is intuitive, just the readability really.
@@romanmunar Looking at it right now actually. I'll do a video on this. It's looks novel.
Always great video Jack!
I love the pace of your latest stuff. Keep it up! 💪🏽
Thank you! And thanks for all your feedback!
nice tutorial and I like the beauty of typescript with zustand implementation... 😊
You're absolutely the best.
Yeah, really like of Zustand.
Now we need a persist video with localstorage sessionstorage and hydration nextjs issues
Yeah, you'll need to employ the supressHydrationErrors flag, or put the localstorage/sessionstorage/etc. into a useEffect so that it runs after hydration.
A bit late to the party, but it was exciting to check current number of Zustand's downloads and see that it's over 600K a year later.
Thanks for the overview!
Absolutely!
Another fantastically valuable video. I'm planning out a new project, zustand is probably leading the charge for now, but I saw a user on another post recommend Effector, that looks pretty great as well. It really clicked with how I think. I'd love to see you do a video it as well. Jack++
You might want to join today's livestream if you want to hear about Effector. I'm going to experiment and record a video on Effector live while you watch. I may get a video out of it, or not. But at the very least you'll learn about Effector.
@@jherr ah bummer! I missed it. Is there a way to view it? Will there be a video on Effector? Thanks!
@@slikk66 There will be! Probably releasing this week after the Wednesday video.
Love your work Jack, keep it up.
Great tutorial man !
Very nice, thank you this is very helpfull to me
I don't understand the addTodo function. Is that recursive or what?
Great video!
It's not recursive, addTodo are another function defined above store, you can check on the finished code
@@iolumin I see now, thanks! did not see that before and I was so confused
Great video! Thanx a lot!
Cool, thanks!
you are the best!!!
love ur content, please never stop ❤️
You're good.
Thanks Jack. Quick question, do you have any series about sharing state across micro frontends?
I do! Check this out: th-cam.com/video/tFDvEITdJZ8/w-d-xo.html I have other videos as well, but this is the most recent.
Love your VSCode theme & font.
Any chance you can share your setup, please?
Thanks!
The font is Cascadia Code and im not so sure about the theme but i think its The Night Owl Theme
Nice tutorial. I like your videos a lot they are short and go straight to the point. Do you know something about getting a slice of context with the context api without unecessary renderings ? I am using a redux-like pattern in my own project but when consuming a context from a component it will rerender every time there is a change in the whole context even if I use a slice of this context. Ive tried some hoc patterns to pass down the desired slice of the context but i find very hard to type those high order components
Check out the docs, github.com/pmndrs/zustand, if select a certain field then you will only get updates when that field changes.
Thank You for the fascinating overview. For such a small application this solution looks elegant and clean. I have a question though. Don't you think handling an input value in a global store will introduce a performance overhead, it's temporary data, but for each keystroke, we create a new global state object by spreading a previous state and simply adding chars 1 by 1. We've just created an n-amount of intermediate objects that will be garbage collected just to change an input value. What are your thoughts on this?
Well, there is only the current state, any previous states can be garbage collected. Also with selectors the updates are very efficient. Only the components that need a particular changes will get re-rendered if you have written your selectors properly.
@@jherr Well, I'm just under the impression from this video th-cam.com/video/ip51Y5v3WLk/w-d-xo.html I never bothered myself thinking of these things, but I know You're also a great fan of performance and optimization techniques, so that's why I'm asking.
@@monastyrskiiden I'm not gonna watch a whole video on it. But if he's talking about lots of object creation through destructuring in loops that would be inefficient, but that is at a large scale. Updating with every keystroke is not going to be a noticeable burden on the VM.
@@jherr Thank You for clarifying this.
Why would you use Zustand vs Jotai? I'm comparing the two for my project. It looks like Jotai lets you wrap a Zustand store as well? Just made me even more confused haha
Yeah, Jotai has a lot of different atom types. My thinking currently is that if it's for a paying client and I just need something that works and is easy to maintain, then Zustand. Otherwise Jotai.
Guys, what does bi-directional mean in state managers? Thanks for the video!
awesome
okey your explanation is wonderful but I am curious about something, what if I want to PERSIST my store, how can I do this
Doesn't the supplied "subscribe" api allow for that reactive'esque mobx vibe you mentioned as con? Or am I off base here?
It was tough coming up with a con. ;) Personally I love reactive so it's not a con for me. I just know some folks are super sold on the unidirectional data flow thing and that's its primary interface.
Thx for this great step by step tutorial. What does this bidirectional thing vs unidirectional mean? From what was said in the video, unidirectional seems to mean that the data is mutated only through the exported interface. Am I correct?
Thanks for this video! Would it be possible to do a video on how to combine zustand with SWR or react-query? SWR would be used to fetch the data initially and define the fetch state (loading, error, ...), but zustand is used for further operations on this fetched data. For example similar to your pokemon list example that can be filtered, but in such way that the data request state management is included
Maybe it's just me but I'm a little dubious on using fetch wrappers for state management. You could use these two in combination. But for my money I use fetchers to get the data and state managers if we need to shared that data to other places in the app.
@@jherr Fair enough, thanks for your quick response. Do you know if it is possible to fetch and set the initial state from within the zustand hook definition or does it always need to be implemented as a separate 'init' function (similar to the load in your todo list example) followed by calling it where the state hook is used?
@@MaximeGoossens You can do out of React setting of the store, as well as asynchronous actions - github.com/pmndrs/zustand
Thanks for sharing jack, great tutorial 👍, and I would like to ask a question after I have tried with this zustand library:
When I call console log in TodoList component, I have found that when I call any of the store methods (eg: update, remove ..) which will cause the TopBar component re-rendered?
Question: is this the limitation of zustand? Or we need to add some memorisation hooks to prevent some unwanted re-renderings?
Use a selector in when you call the Zustand hook to get just the data you need from it. This should reduce the number or re-renders.
Hi Jack,
I'm a Solutions Architect and WebOps Engineer trying to get back into development. I'm wanting to build a SaaS idea that I have and I'm stuck on choosing a global state manager. I wondered if you could explain the differences between Proxy, Flux and Atomic state? What are the benefits of one over the other? Daishi Kato has solutions for each and I want to be using the right one for my use case.
Thanks🙏🏼
Feel free to use this as a video topic 😊Just joined the Discord server as well, wish I'd done this before 😅
i began to use zustand recently and got to know about the persist function that comes in the zustand/middleware package, i know very little about persist that it stores the states in local storage,
but i have come across an issue that the local storage can be altered and misused to change the sensitive data from the browser. I am looking for a solution for this problem. Is there any inbuilt way to prevent anyone from changing local storage data or any in-built feature in zustand that might help with this. Kindly help!
Localstorage is domain specific, so the code would need to be executing within the context of the page. That being said, I would never store anything sensitive in localstorage, regardless of the mechanism I would use to put it there. You should store sensitive data on a service and use authorization and JWTs to access it.
best best best
I still have an error, I think it would be something close to this:
import create from 'zustand'
interface LoginState {
email: string;
password: string,
fnOnChangeLogin: (field: string, value: string) => {field: string, value: string}
}
export const loginStore = create(set => ({
fnOnChangeLogin: (obj) => set((state) => ({...state, [obj.field]:obj.value }))
})
how do slice with typescript
An array slice? Just .slice, same as in JavaScript.
@@jherr I got it, I would like to separate it, you created everything in the store file. I imagine it gets simpler following redux's slice logic
Hi Jack, can we implement zustand in NX mono repos? Thank you
Yes. Maybe I’m missing something but this shouldn’t be an issue. Have you run into one?
@@jherr I tried NX, but not with zustand, I m asking cause I noticed zustand doesn't need
@@farouktouil5036 Yeah, it's really nice that way. It just creates custom hooks that you can use anywhere and get access to the global state.
@@jherrBy the way thank you for the Todo example, I took tour to the documentation of zustand, I let you know that there is actually an update for typescript there ..
lol did you just sike
Having to write the fully Store interface before implementing the store is very annoying. Ideally, Zustand should infer it in some way.
It will if you don’t have value types that change. As in this case names goes from a void to string[].
@@jherr That's not my experience. Without explicitly typing create(), VSCode highlights _Object is of type 'unknown._ error on set(), and _Parameter 'state' implicitly has an 'any' type_ error on state.
@@RodrigoCFD you are right. Sorry for my error there.
what about Provider?
Zustand doesnt need a provider
Zustand means state in German.
Yes, and it’s pronounced as “Tsushtand”