Provide example for using the Persist middleware with Zustood

[danobot]

Hi,
I am having some trouble getting the persist middleware to work correctly.
Accortding to the docs, store options includes the middleware array and persist options in the same location and persist.enabled must be true to enable persistence. I added name as that is the only required parameter for persist.

PeristOptions interface can be found here:

Zustand Persist docs:
https://github.com/pmndrs/zustand/blob/main/readme.md#persist-middleware

My code

Attempt 1

export const presetStore = createStore('presets')({
  name: 'presets',
  presets: [],
  middlewares: ['immer', 'devtools', 'persist'],
  persist: {
      enabled: true,
      name: "preset-storage"
  }
})

Atempt 2

I tried passing storeOptions as second parameter to createStore function as described in README.md under "Options"

export const presetStore = createStore('presets',  {
  middlewares: ['immer','persist'],
  persist: {
  enabled: true,
  name: "preset-storage"
}
})({
    presets: []
  }
 )

Attempt 3

This is after inspecting the createStore function in Zustood source code:
https://github.com/udecode/zustood/blob/b6aad9310e2e54e0449542060cf72fb5335d5c1c/packages/zustood/src/createStore.ts#L33C7-L33C7
Zustood createStore code:

export const createStore =
  <TName extends string>(name: TName) =>
  <T extends State>(
    initialState: T,
    options: CreateStoreOptions<T> = {}
  )

My Code

export const presetStore = createStore('presets')({
  presets: [],
},{
    middlewares: ['immer', 'devtools', 'persist'],
    persist: {
    enabled: true,
    name: "preset-storage"
  },
    devtools: { enabled: true },
    immer: { enabled: true }
  }
 )

Error Message

TypeError: 'immer' is not a function,

Attempt 4

Removed middleware to match the example in issue #64

export const presetStore = createStore('presets')({
  presets: timerData,
},{
    // middlewares: ['immer', 'devtools', 'persist'],
    persist: {
      enabled: true,
      name: "preset-storage"
    },
    // devtools: { enabled: true },
    immer: { enabled: true }
  }
 )

Error message

[zustand persist middleware] Unable to update item 'preset-storage', the given storage is currently unavailable.

Attempt 6

Tried AsyncStorage, the error disappeared, however after restarting the app the previous state is not restored.
There is no error message other than the deprecation error regarding accessing passing vanilla stores (issue #60 )

import AsyncStorage from '@react-native-async-storage/async-storage';
import { createJSONStorage } from 'zustand/middleware';


export const presetStore = createStore('presets')({
  presets: [],
},{

    persist: {
      enabled: true,
      name: "preset-storage",
      storage: createJSONStorage(() => AsyncStorage)
    },
    immer: { enabled: true }
  }
 )

Attempt 7

MIgrated to zustand and facing the same persist issue.

import { persist } from 'zustand/middleware';
import { create } from 'zustand';

export const presetStore = create(
persist(
      (set, get) => ({
        presets: [],
       }),
      {
           name: "presets-storate"
      }
));

Tried different storage options like localStorage and AsyncStorage as well.

storage: createJSONStorage(() => localStorage),
 storage: createJSONStorage(() => AsyncStorage),

Zustand error message:

 [zustand persist middleware] Unable to update item 'preset-storage', the given storage is currently unavailable.

How I am accessing the store

This is how I am using the store to interact with the state. All works great, just cant get the persist to work across app restarts

import { presetStore } from './redux/PresetStore';

presetStore.set.update(editedPreset)

[danobot]

The issue was with React Natives Bottom Tab Navigator which did not rerender after zustood store got update post rehydration.
I added a logger middleware to determine rehydration works as expected and the issue was elsewhere (in component rerendering).