improve README and add persistence storage plugin

PabloSzx · Mar 27, 2020 · ceab410 · ceab410
2 parents 6985c7a + 753b90a
commit ceab410
Show file tree

Hide file tree

Showing 53 changed files with 244,231 additions and 2,737 deletions.
diff --git a/README.md b/README.md
@@ -22,13 +22,13 @@ yarn add react-state-selector
 
 > Check **https://pabloszx.github.io/react-state-selector** for more detailed examples and use cases.
 
-### TODOs
+### Features
 
-- [x] Redux DevTools
-- [x] async actions
+- [x] Redux **DevTools** support
+- [x] **async** actions (_**redux-thunk** alike_)
 - [x] **TypeScript** first class support
 - [x] **_reselect_** createSelector support
-- [ ] **More** examples and use cases (In progress...)
+- [x] Easy and efficient **localStorage** data persistence
 
 ### Basic Usage
 
@@ -57,12 +57,12 @@ const {
       },
     },
     actions: {
-      incrementA: (n: number) => draft => {
+      incrementA: (n: number) => (draft) => {
         // Here you can mutate "draft", and immer will
         // automatically make the immutable equivalent
         draft.countA += n;
       },
-      incrementB: (n: number) => draft => {
+      incrementB: (n: number) => (draft) => {
         draft.countB += n;
       },
     },
@@ -126,12 +126,12 @@ const {
       },
     },
     actions: {
-      incrementA: (n: number) => draft => {
+      incrementA: (n: number) => (draft) => {
         // Here you can mutate "draft", and immer will
         // automatically make the immutable equivalent
         draft.countA += n;
       },
-      incrementB: (n: number) => draft => {
+      incrementB: (n: number) => (draft) => {
         draft.countB += n;
       },
     },
@@ -195,7 +195,7 @@ By default every created store gives a couple of out of the box functionality, i
 - If you **don't** give it a function, it will work simply as a **state getter**, so you can check the global state anytime without any restriction.
 
 ```ts
-const state = produce(draft => {
+const state = produce((draft) => {
   draft.a += 1;
 });
 console.log(produce() === state); // true
@@ -208,7 +208,7 @@ console.log(produce() === state); // true
 - You shouldn't rely on this feature to transform the entire state as with [produce](#produce-functiondraft--void--tstore-tstore) or [custom actions](#custom-actions);
 
 ```ts
-const state = await asyncProduce(async draft => {
+const state = await asyncProduce(async (draft) => {
   draft.users = await (await fetch("/api/users")).json();
 });
 console.log(produce() === state); // true
@@ -251,7 +251,7 @@ const IncrementComp = () => {
   return (
     <button
       onClick={() =>
-        produce(draft => {
+        produce((draft) => {
           draft.count += 1;
         })
       }
@@ -346,7 +346,7 @@ const Store = createStore(
   { a: 1 },
   {
     actions: {
-      increment: (n: number) => draft => {
+      increment: (n: number) => (draft) => {
         draft.a += n;
       },
     },
@@ -356,7 +356,7 @@ const StoreCtx = createStore(
   { b: 1 },
   {
     actions: {
-      decrement: (n: number) => draft => {
+      decrement: (n: number) => (draft) => {
         draft.b -= n;
       },
     },
@@ -407,21 +407,21 @@ const Store = createStore(
   },
   {
     asyncActions: {
-      getData: produce => async bodyArgs => {
-        produce(draft => {
+      getData: (produce) => async (bodyArgs) => {
+        produce((draft) => {
           draft.state = State.loading;
         });
 
         try {
           const response = await axios.post("/data", bodyArgs);
 
-          produce(draft => {
+          produce((draft) => {
             draft.state = State.complete;
             draft.data = response.data;
           });
         } catch (err) {
           console.error(err);
-          produce(draft => {
+          produce((draft) => {
             draft.state = State.error;
           });
         }
@@ -461,6 +461,88 @@ const Data = () => {
 
 > Keep in mind that you can mix common synchronous actions and async actions in a single store, but you should not repeat the action names in both objects.
 
+### **localStorage** data persistence and \*_DevTools_
+
+When creating an store via **createStore** or **createStoreContext** you can specify some field that enable some useful features:
+
+```tsx
+//createStoreContext(
+createStore(
+  {
+    foo: "bar",
+  },
+  {
+    /**
+     * devName
+     *
+     * Activates the Redux DevTools for this store using
+     * this name as reference.
+     */
+    devName: "fooBarStore",
+
+    /**
+     * devToolsInProduction
+     *
+     * Activates the Redux Devtools functionality in production.
+     *
+     * By default this is false
+     */
+    devToolsInProduction: true,
+    storagePersistence: {
+      /**
+       * isActive
+       *
+       * Activates the data persistence in this store
+       **/
+      isActive: true,
+      /**
+       * persistenceKey
+       *
+       * Set the key used for the storage persistence method.
+       *
+       * It has to be a string, and if it's not specified
+       * reuses the "devName", but it has to exists at least one
+       * of these two if the storagePersistence is active
+       **/
+      persistenceKey: "fooBarStore",
+      /**
+       * debounceWait
+       *
+       * Calling an external store like localStorage every time
+       * any change to the store is very computationally expensive
+       * and that's why by default this functionality is being debounced
+       * to be called only when needed, after X amount of milliseconds
+       * since the last change to the store.
+       *
+       * By default it's set to 3000 ms, but you can customize it to
+       * be 0 if you want almost instant save to the persistence store
+       **/
+      debounceWait: 1000,
+      /**
+       * persistenceMethod
+       *
+       * You also can customize the persistence method,
+       * but by default uses window.localStorage.
+       *
+       * Keep in mind that it should follow the same API
+       * of setItem and getItem of localStorage
+       **/
+      persistenceMethod: window.localStorage,
+      /**
+       * isSSR
+       *
+       * Flag used to specify that this store is going to be
+       * used in server side rendering environments and it prevents
+       * client/server mismatched html on client side hydration
+       *
+       * false by default
+       **/
+      isSSR: true,
+    },
+  }
+);
+```
+
 ### **Map / Set** support _and/or_ **old browsers / React Native** support
 
 In [Immer](https://immerjs.github.io/immer) latest version in order to reduce bundle size if you need support for **Map**, **Set**, **old browsers** or **React Native** you need to call some specific Immer functions as early as possible in your application.

diff --git a/docs/asset-manifest.json b/docs/asset-manifest.json
@@ -1,37 +1,38 @@
 {
   "files": {
-    "main.css": "/static/css/main.b148d59f.chunk.css",
-    "main.js": "/main.4a1b863f3ba43285f966.bundle.js",
-    "main.css.map": "/static/css/main.b148d59f.chunk.css.map",
-    "main.js.map": "/main.4a1b863f3ba43285f966.bundle.js.map",
-    "runtime~main.js": "/runtime~main.4a1b863f3ba43285f966.bundle.js",
-    "runtime~main.js.map": "/runtime~main.4a1b863f3ba43285f966.bundle.js.map",
-    "vendors~main.js": "/vendors~main.4a1b863f3ba43285f966.bundle.js",
-    "vendors~main.js.map": "/vendors~main.4a1b863f3ba43285f966.bundle.js.map",
-    "../dist/index.d.ts/.storybook/config.d.ts": "/../dist/index.d.ts/.storybook/config.d.ts",
-    "../dist/index.d.ts/src/common.d.ts": "/../dist/index.d.ts/src/common.d.ts",
-    "../dist/index.d.ts/src/createStore.d.ts": "/../dist/index.d.ts/src/createStore.d.ts",
-    "../dist/index.d.ts/src/createStoreContext.d.ts": "/../dist/index.d.ts/src/createStoreContext.d.ts",
-    "../dist/index.d.ts/src/index.d.ts": "/../dist/index.d.ts/src/index.d.ts",
-    "../dist/index.d.ts/src/plugins/devTools.d.ts": "/../dist/index.d.ts/src/plugins/devTools.d.ts",
-    "../dist/index.d.ts/stories/createStoreContext/asyncActionsContext.stories.d.ts": "/../dist/index.d.ts/stories/createStoreContext/asyncActionsContext.stories.d.ts",
-    "../dist/index.d.ts/stories/createStoreContext/basicUsageContext.stories.d.ts": "/../dist/index.d.ts/stories/createStoreContext/basicUsageContext.stories.d.ts",
-    "../dist/index.d.ts/stories/createStore/asyncActions.stories.d.ts": "/../dist/index.d.ts/stories/createStore/asyncActions.stories.d.ts",
-    "../dist/index.d.ts/stories/createStore/basicUsage.stories.d.ts": "/../dist/index.d.ts/stories/createStore/basicUsage.stories.d.ts",
-    "../dist/index.d.ts/stories/createStore/createSelector.stories.d.ts": "/../dist/index.d.ts/stories/createStore/createSelector.stories.d.ts",
-    "../dist/index.d.ts/stories/createStore/multipleProps.stories.d.ts": "/../dist/index.d.ts/stories/createStore/multipleProps.stories.d.ts",
-    "../dist/index.d.ts/stories/devTools/createStore.stories.d.ts": "/../dist/index.d.ts/stories/devTools/createStore.stories.d.ts",
-    "../dist/index.d.ts/stories/devTools/createStoreContext.stories.d.ts": "/../dist/index.d.ts/stories/devTools/createStoreContext.stories.d.ts",
-    "../dist/index.d.ts/stories/utils/devTools.d.ts": "/../dist/index.d.ts/stories/utils/devTools.d.ts",
-    "iframe.html": "/iframe.html",
-    "precache-manifest.19ce9a26fc9f49a2e7c55ac3ee71f7a8.js": "/precache-manifest.19ce9a26fc9f49a2e7c55ac3ee71f7a8.js",
-    "service-worker.js": "/service-worker.js",
-    "vendors~main.4a1b863f3ba43285f966.bundle.js.LICENSE.txt": "/vendors~main.4a1b863f3ba43285f966.bundle.js.LICENSE.txt"
+    "main.css": "./static/css/main.0ebf8677.chunk.css",
+    "main.js": "./main.ed27fa0b068d5d94a0aa.bundle.js",
+    "main.css.map": "./static/css/main.0ebf8677.chunk.css.map",
+    "main.js.map": "./main.ed27fa0b068d5d94a0aa.bundle.js.map",
+    "runtime~main.js": "./runtime~main.ed27fa0b068d5d94a0aa.bundle.js",
+    "runtime~main.js.map": "./runtime~main.ed27fa0b068d5d94a0aa.bundle.js.map",
+    "vendors~main.js": "./vendors~main.ed27fa0b068d5d94a0aa.bundle.js",
+    "vendors~main.js.map": "./vendors~main.ed27fa0b068d5d94a0aa.bundle.js.map",
+    "../dist/.storybook/config.d.ts": "./../dist/.storybook/config.d.ts",
+    "../dist/src/common.d.ts": "./../dist/src/common.d.ts",
+    "../dist/src/createStore.d.ts": "./../dist/src/createStore.d.ts",
+    "../dist/src/createStoreContext.d.ts": "./../dist/src/createStoreContext.d.ts",
+    "../dist/src/index.d.ts": "./../dist/src/index.d.ts",
+    "../dist/src/plugins/devTools.d.ts": "./../dist/src/plugins/devTools.d.ts",
+    "../dist/src/plugins/persistenceStorage.d.ts": "./../dist/src/plugins/persistenceStorage.d.ts",
+    "../dist/stories/createStore/asyncActions.stories.d.ts": "./../dist/stories/createStore/asyncActions.stories.d.ts",
+    "../dist/stories/createStore/basicUsage.stories.d.ts": "./../dist/stories/createStore/basicUsage.stories.d.ts",
+    "../dist/stories/createStore/createSelector.stories.d.ts": "./../dist/stories/createStore/createSelector.stories.d.ts",
+    "../dist/stories/createStore/multipleProps.stories.d.ts": "./../dist/stories/createStore/multipleProps.stories.d.ts",
+    "../dist/stories/createStoreContext/asyncActionsContext.stories.d.ts": "./../dist/stories/createStoreContext/asyncActionsContext.stories.d.ts",
+    "../dist/stories/createStoreContext/basicUsageContext.stories.d.ts": "./../dist/stories/createStoreContext/basicUsageContext.stories.d.ts",
+    "../dist/stories/devTools/createStore.stories.d.ts": "./../dist/stories/devTools/createStore.stories.d.ts",
+    "../dist/stories/devTools/createStoreContext.stories.d.ts": "./../dist/stories/devTools/createStoreContext.stories.d.ts",
+    "../dist/stories/utils/devTools.d.ts": "./../dist/stories/utils/devTools.d.ts",
+    "iframe.html": "./iframe.html",
+    "precache-manifest.8ad1891fb7fd4f8371193ad4675ef421.js": "./precache-manifest.8ad1891fb7fd4f8371193ad4675ef421.js",
+    "service-worker.js": "./service-worker.js",
+    "vendors~main.ed27fa0b068d5d94a0aa.bundle.js.LICENSE.txt": "./vendors~main.ed27fa0b068d5d94a0aa.bundle.js.LICENSE.txt"
   },
   "entrypoints": [
-    "runtime~main.4a1b863f3ba43285f966.bundle.js",
-    "vendors~main.4a1b863f3ba43285f966.bundle.js",
-    "static/css/main.b148d59f.chunk.css",
-    "main.4a1b863f3ba43285f966.bundle.js"
+    "runtime~main.ed27fa0b068d5d94a0aa.bundle.js",
+    "vendors~main.ed27fa0b068d5d94a0aa.bundle.js",
+    "static/css/main.0ebf8677.chunk.css",
+    "main.ed27fa0b068d5d94a0aa.bundle.js"
   ]
-}
+}