Async persist not repopulating store #2605
-
I have a small store that I need to persist to an API. The saving and retrieval of the store to/from the API via Here is my store: import { create } from 'zustand';
import {
devtools,
persist,
createJSONStorage,
type StateStorage
} from 'zustand/middleware';
import { getSetting, saveSetting } from '@/services/settings';
import { ZUSTAND_DASHBOARD_STORAGE_NAME } from '@/core/constants';
import { dashboardSlice } from './dashboardSlice';
import type { DashboardState } from './types';
const storage: StateStorage = {
getItem: async (name) => await getSetting(name),
setItem: async (name, value) => await saveSetting(name, value),
removeItem: () => null
};
const useDashboardState = create<DashboardState>()(
persist(
devtools((...a) => ({
...dashboardSlice(...a)
})),
{
name: ZUSTAND_DASHBOARD_STORAGE_NAME,
storage: createJSONStorage(() => storage),
skipHydration: true,
partialize: (state) => state.layouts
}
)
);
export default useDashboardState; As you can see, I am skipping hydration and calling it manually in my component, this is working as I can see the API call to retrieve the store, the problem seems to be that it isn't being merged once retreived. I'm hoping I'm doing something ridiculous that is obvious to those more experienced in these things! Any help will be gratefully received! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
@AndrewIsh I believe this part
should be like this
|
Beta Was this translation helpful? Give feedback.
@AndrewIsh I believe this part
should be like this