From 56943cbea2b91867e9ca5cafd3e2db65e9018dac Mon Sep 17 00:00:00 2001
From: Huw Roberts <huw@huwroberts.dev>
Date: Thu, 3 Apr 2025 08:56:00 +0100
Subject: [PATCH] Update README with corrected persist temporal example

---
 README.md | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

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<StoreState>()(
-  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<T> from](https://github.com/pmndrs/zustand/blob/f0ff30f7c431f6bf25b3cb439d065a7e61355df4/src/vanilla.ts#L8) zustand for more details.