React Zustand Tutorial - 7. Subscribe and subscribeWithSelector Middleware (typescript)

Рет қаралды 5,759

Conny Gu

Күн бұрын

Пікірлер: 32

@connygu Жыл бұрын

github code for this video github.com/niftybytes4u/react_zustand_tutorial/tree/f08aa9f84de08eeec469faeaf128f19a81e3b80a

@OpenCoreX 3 ай бұрын

The most comprehensive Zustand Tutorial on KZbin. Thanks for sharing your knowledge with us.

@FaramarzF.R 9 ай бұрын

You explain the lesson wonderfully. Simple and fluent. Comprehensible. you are the best. Thank you. ❤👏

@elhadjarroyo3304 5 ай бұрын

Great video series. It is helping me lots. Many thanks.

@rasaf_ibrahim Жыл бұрын

You have explained it well. Thank you.

@josht2602 Жыл бұрын

thanks for the tutorial, Conny. How did you decide where to put the subscribeWithSelector middleware? Why should it come before the persist middleware? I put it just after the persist middleware, and still no errors. official docs offers any clues?

@connygu Жыл бұрын

Hi @josht2602 , I think, the postion of immer, persist and devtools are important. Other middlewares are not so important. But the real reason I am also not so clear. I asked the author Daishi, he just send me a test file to test the order before use them: github.com/pmndrs/zustand/blob/main/tests/middlewareTypes.test.tsx. But I didn't do that, I am lazy. The order in video, is direct from Daishi. 😅

@josht2602 Жыл бұрын

@@connygu thanks, Conny.

@ethannnnnliu 5 ай бұрын

Thank you for the videos. Truly appreciate your work! I was wonder if you're going to create videos about GraphQL?

@lowenathan9692 Жыл бұрын

Good explanation. Thank you! Please can you tell how Zustand works under the hood. I believe it uses Node Event Emitter and Listener. So, I get a warning when deploying my application because the max number of Event Listeners is exceeded. Can you please tell me if there is a way to use Zustand without Node Event Listeners or with less? Thank you again so much for your videos.

@connygu Жыл бұрын

Hi @lowenathan9692, honestly, I don't known. I didn't find any code about node event listener in zustand. Maybe from react? I would suggest go to the zustand discord community, daishi will answer your question personally, and I am also very interested in this question and I am also there. 😉

@connygu Жыл бұрын

@lowenathan9692 , I just searched the internet, I saw people in reddit said, it uses the react 18 hook useSyncExternalStore. Besides, daishi has an dedicated video about this hook: kzbin.info/www/bejne/pYHJhHZrl7aDiJo

@lowenathan9692 Жыл бұрын

@@connygu thank you so much

@DarrylHebbes 10 ай бұрын

You need to remove event listeners after use else they pile up .

@franprince 6 ай бұрын

Great video, it helped me a lot.

@minhhieple6483 Жыл бұрын

May I ask, If I need fetch initial store data from API, how can I fetch data when cretae store object ?

@connygu Жыл бұрын

Hi @minhieple6483 the intial state must be an sync, just make an action (function state in the store) in the store, which allows async, just call the action after you created the store and call the action to fill the state. For this, the author Daishi has an answer, please look here: github.com/pmndrs/zustand/discussions/676 But if you often interactive with backend, I would suggest take a look at react query.

@minhhieple6483 Жыл бұрын

@@connygu Thank you very much!!!

@minhhieple6483 Жыл бұрын

@@connygu Thank you very much

@ibahimakande7262 7 ай бұрын

I find the conditional statement convincing, but I'm still wondering how it achieves the desired result. The first condition states 'if (prevState.fish 5)', meaning that when the current state is 6, the background color turns green. However, this condition doesn't seem to be met. For example, when prevState.fish is 8 and state.fish is 9, the background color still turns green, even though prevState.fish is not less than or equal to 5. Similarly, when prevState.fish is 4 and state.fish is 5, the background color turns light pink, but again, the condition is not satisfied. I would appreciate it if you could shed more light on how this logic is functioning.