Persisting Onboarding State

[00:00:00]
>> Kadi Kraman: I said that we're using a state management library because we want to persist our onboarding state. So right now, we are not persisting our onboarding state, it is still in memory. So, if we refresh or reload the app, it's going to reset back to the default value in our userStore.

[00:00:17]
We want to use AsyncStorage to persist this across app launches. And most state management libraries, I would dare say all state management libraries, that work with React Native have some kind of an adapter that allows you to use AsyncStorage, to persist the state across app launches. And this is the case with Redux, with the stand with your tie, so let's install AsyncStorage.

[00:00:59]
>> Kadi Kraman: I will just start my bundle again, npx expo start.
>> Kadi Kraman: Okay, so in our userStore, we need to update this to add the persister. And one thing that I'll say about Zustand, I find this API very difficult to add dynamically. But basically we need to import AsyncStorage, I will copy this import cuz I`m not gonna type it out.

[00:01:32]
>> Kadi Kraman: Okay, so import AsyncStorage, and then we need to import persist and createJSONStorage.
>> Kadi Kraman: From, this is ``zustand/middleware``, okay? So the way this is added here is a little bit confusing, but, basically, I'm gonna remove this type from here for now. So, the persist will be a function around this function that we passed into create.

[00:02:14]
So, let's do persist instead, and we'll need a brace, and we'll close the brace. And the type of UserStore now goes into brackets next to persist, there we go. And now, this persist actually takes two arguments, one is the store, and then the second is a config object describing how to persist it across launches.

[00:02:49]
So here, we've got the right bracket, I think it's here, we'll do an object, so we'll give it a name. So this is the same as if you did the inter-course, we use the key to persist in AsyncStorage. This is exactly the same, so this is the key that's going to be passed into the AsyncStorage, so, let's call it ``plantly-user-store``.

[00:03:15]
And then storage, this is where we're going to use our AsyncStorage, so we createJSONStorage. So this was the import from the Zustand/middleware, and this will be a function and we just call AsyncStorage, okay? Hopefully I got this right, I will say this against Zustand, I find making this into a persister quite tedious, there's a lot of prepping and brackets.

[00:03:47]
Anyway, now it is done, so our default value is false, so let's finish onboarding, and now if I reload, I'm still in the app. So, now if I go back to onboarding and then reload, you can see that it's persisted this bullion for whether or not we've finished onboarding.

[00:04:08]
So it's saved on your device storage.