diff --git a/README.md b/README.md index 9212ef2..f4cda69 100644 --- a/README.md +++ b/README.md @@ -452,18 +452,26 @@ For a full list of middleware, see [zustand middleware](https://www.npmjs.com/pa import { persist } from 'zustand/middleware'; const useStoreWithUndo = create()( - temporal( - (set) => ({ - // your store fields - }), - { - wrapTemporal: (storeInitializer) => - persist(storeInitializer, { name: 'temporal-persist' }), - }, - ), + persist( // <-- persist + temporal( + (set) => ({ + // your store fields + }), + { + wrapTemporal: (storeInitializer) => { + persist(storeInitializer, { // <-- persist + name: 'temporal-persist' + }); + }, + } + ) + ) ); ``` +> In the example above, note that we use `persist` twice. The outer persist is persisting your user facing store, and the inner persist, as part of the temporal options, will persist the temporal store that's created by the middleware. Simply put: there are two zustand stores, so you must persist both. + + ### `useStore.temporal` When using zustand with the `temporal` middleware, a `temporal` object is attached to your vanilla or React-based store. `temporal` is a vanilla zustand store: see [StoreApi from](https://github.com/pmndrs/zustand/blob/f0ff30f7c431f6bf25b3cb439d065a7e61355df4/src/vanilla.ts#L8) zustand for more details.