Zustand persist
Persist and rehydrate state works on react and react native.
Zustand is a small, fast and scaleable bearbones state-management solution.
This library is inspired by https://github.com/rt2zz/redux-persist.
Contributions are Welcome
$ npm install zustand-persist
$ yarn add zustand-persist
Try Demo Here
Middleware
const { persist, purge } = configurePersist({
storage: localStorage,
rootKey: 'root',
})
const useStore = createStore(
persist({
key: 'auth',
allowlist: ['isAuthenticated', 'user'],
denylist: [],
}, (set) => ({
isAuthenticating: false,
isAuthenticated: false,
user: undefined,
login: async (username, password) =>{
set((state) => ({ isAuthenticating: true }))
const { user } = await webLogin(username, password)
set((state) => ({
isAuthenticated: true,
isAuthenticating: false,
user,
})),
}
}))
)
PersistGate
function App() {
useStore()
return (
<PersistGate
onBeforeLift={() => {
console.log('onBeforeLift')
}}
loading={<Loading />}>
<AppContent />
</PersistGate>
)
}
Limitations
Zustand allows any valid JavaScript data types to set in the store, such as Set, Map, or functions. Both localStorage
and AsyncStorage
require that all values set in them be serializable, or converted into string form for storage. This means if you wish to persist the contents of your store all of its values need to be serializable. Any values which are not serializable will be silently absent upon hydration.
A note on storing actions (functions): your actions are safe as long as they exist in the initial state during store creation. The hydration process merges initial state with stored state.
Todo
- enhanced removing root logic