React Zustand Tutorial - 6 Persist Middleware(typescript)

[@sahilshakya__]

Thank you Conny, learned so much.

[@playwithreality]

Thank you Conny, this was exactly what I needed

[@emmanuelxs6143]

Please what's the name of the vscode extension you mentioned

[@maskman4821]

Great tutorial 👍

[@nk_77777]

Thank you sooooo much!

[@meka4996]

Regarding the TypeError: Cannot read properties of undefined (reading 'clearStorage') , I solved it after restarting NextJs, waiting for a few seconds, then refreshing the page... then maybe restarting NextJs again...

[@connygu]

thanks @meka4996 for solve this problem! I am not very fit in next.js. But I can remeber, the author Daishi has once written an article about how to use react zustand with nextjs. I will take a look, what he talked about in the article.

[@connygu]

The github code for this chapter is here: github.com/niftybytes4u/react_zustand_tutorial/tree/f08aa9f84de08eeec469faeaf128f19a81e3b80a

[@amirfarkhadov5926]

Amazing! Thanks!

[@lazygamer6249]

how to save the local storage name dynamically.?

[@connygu]

Hi @lazygamer6249 , you can try this code: useFoodStore.persist.setOptions({ name: "your_new_store_name", });

[@lazygamer6249]

​@@connygu It works . but after reload the original storage key restored. Where can I reach you like discord or any other media.

[@connygu]

@@lazygamer6249 Of course it will reload the original key by restart your program. So you task is at the beginning to set a store name check, if the new_store_name existed, then use this one, else set the original store name. // file foodStore.ts const setFoodStoreName = () => { const lastest_store_name = "new_store_name"; // this maybe need a long logic const hasStoreName = Object.keys(localStorage).includes(lastest_store_name); if (hasStoreName) { return lastest_store_name; } else { return "food store"; } }; export const useFoodStore = create()( persist(()=>{...}, { name: setFoodStoreName() } ) ) I think, this should work.

[@connygu]

@@lazygamer6249 Currently I don't have a personal discord, but maybe I will set a discord, because I also realized there are more people ask me questions. Maybe a small community will be better. I am not a expert, a small community maybe help each other will be also nice. Thanks for the mention. Currently I think, the best way you reach me is in the youtube comment, I always try my best to answer my video related questions. Otherwise, you can also add my linkedin. :-) www.linkedin.com/in/ying-gu-312b4029/

[@lazygamer6249]

@@connygu thank you so much for your help and I'm eagerly waiting to join your community.

[@jaferhussein2645]

Thanks very much

[@FaramarzF.R]

What a unique course. Thank you very much. ❤👏 Is there such a feature in Redux Toolkit to store data in local/session storage? Is there a library that makes it easy to work with Local Sorage when we're not using Zustand?

[@kenyie8080]

Can you show how to persist Maps in localStorage?

[@connygu]

Hi @kenyie8080 , to persist Maps in the localStorage, you just simply reimplement the "getItem", "setItem" and "removeItem" in the "storage" option by yourself. I just made a dogStore example, please see code here: codesandbox.io/s/persist-with-map-c27rc8 The documentation is here: github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#how-do-i-use-it-with-map-and-set

[@kenyie8080]

@@connygu Thank you! I tried by myself before asking you but my localstorage field kept getting cleared on reload. I ended up using an array instead because I didn't figure out how to make a Map work. But I just tried with your code, now it works for me! I must have been doing something wrong before.

[@SunithaCK-w5l]

Hello, Thanks for this nice tutorial! How can I persist data in cookies using Zustand? Could you show me an example?

[@harag9]

Thanks for this small series of tutorials on Zustand.

[@luisjoselopezd]

Thank you!

[@connygu]

Hi @luisjoselopezd, you are welcome!😊

[@meka4996]

Resetting the memory also clears my localStorage. I guess "useBearStore.persist.clearStorage" is not needed. Also that gives NextJs problem: TypeError: Cannot read properties of undefined (reading 'clearStorage')

[@harag9]

Correct if you reset the state in memory that will then reset the persist data to the same values. The ClearStorage that was mentioned in the video is basically to just delete the storage.

[@promasarachesskit9124]

Thank you!

[@NatalieOndricka]

'promo sm'