Add ability to delete, or choose not to rehydrate the store in onRehydrateStorage

@mirshko @barbogast @AnatoleLucet

How I managed to make zustand persist accept asynchronous storage.

First of all, I want to acknowledge the simplicity with which this library was created, otherwise I wouldn’t have the confidence to look into its source code and try a workaround. Big up team! 🙌🏼 My hopes are that this is not just a hack, but serves as an inspiration to others or maybe even a good fix for this amazing library.

Problem

As I said earlier, my issue was that zustand’s persist middleware was overwriting the storage on hydrate, because there was no “initial” way of making it to or check for a condition before overwriting the storage or wait for a trigger to start hydration, before getting the storage - in case one has an asynchronous storage ( the edge case of an encrypted storage which is available after the user successfully enters the PIN / Password / biometrics ( most cases happen in React Native).

Solution

1. Because I am using the onRehydrateStorage method to know when my hydration ends, I configured my persist store with empty options in order to block any storage overwrite or to solve any type error that comes if my getStorage is an async function.

      onRehydrateStorage: () => async () => {},
      getStorage: undefined,

1. Then, after I get my storage initialised, I call api.persist.setOptions overwriting in the process the empty getStorage and onRehydrateStorage with the methods that I need, and then I trigger a rehydration with api.persist.rehydrate().

Caveats

In order for this workaround to be successful, I had to take the unorthodox way and patch the library. Initial storage hydration is stopped, but at the same time makes any persist api methods unavailable as these are set later right before hydration, after the guard case where the middleware checks if the storage is set

In the patch, I’m moving the storage guard case after the api.persist property is set and before hydrate is called. Of course, this throws TypeError: Cannot read property 'setItem' of undefined because now persist will continue to call setItem on initialisation and for this I had to add an additional guard case in my patch to check if the storage exists there.

diff --git a/node_modules/zustand/middleware.js b/node_modules/zustand/middleware.js
index 4cb6011..21e052f 100644
--- a/node_modules/zustand/middleware.js
+++ b/node_modules/zustand/middleware.js
@@ -317,18 +317,11 @@ var persist = function persist(config, baseOptions) {
       storage = options.getStorage();
     } catch (e) {}
 
-    if (!storage) {
-      return config(function () {
-        console.warn("[zustand persist middleware] Unable to update item '" + options.name + "', the given storage is currently unavailable.");
-        set.apply(void 0, arguments);
-      }, get, api);
-    } else if (!storage.removeItem) {
-      console.warn("[zustand persist middleware] The given storage for item '" + options.name + "' does not contain a 'removeItem' method, which will be required in v4.");
-    }
 
     var thenableSerialize = toThenable(options.serialize);
 
     var setItem = function setItem() {
+      if (!storage) return;
       var state = options.partialize(_extends({}, get()));
 
       if (options.whitelist) {
@@ -445,6 +438,14 @@ var persist = function persist(config, baseOptions) {
         };
       }
     };
+    if (!storage) {
+      return config(function () {
+        console.warn("[zustand persist middleware] Unable to update item '" + options.name + "', the given storage is currently unavailable.");
+        set.apply(void 0, arguments);
+      }, get, api);
+    } else if (!storage.removeItem) {
+      console.warn("[zustand persist middleware] The given storage for item '" + options.name + "' does not contain a 'removeItem' method, which will be required in v4.");
+    }
     hydrate();
     return stateFromStorage || configResult;
   };

Can anyone help what should be implemented for this issue?