fluxible-js - npm Package Compare versions

Comparing version 6.1.3 to 6.1.4

__tests__/unit/persist.spec.js

@@ -49,3 +49,9 @@ /** @format */
 
-    expect(initCallback).toHaveBeenCalled();
+    expect(initCallback).toHaveBeenCalledWith({
+      user: {
+        name: 'test user'
+      },
+      testValue: 'value',
+      anotherValue: 'test value'
+    });
   });
@@ -453,3 +459,9 @@
 
-        expect(initCallback).toHaveBeenCalled();
+        expect(initCallback).toHaveBeenCalledWith({
+          user: {
+            name: 'test user'
+          },
+          testValue: 'value',
+          anotherValue: 'test value'
+        });
       }
@@ -456,0 +468,0 @@ );

lib/index.d.ts

 export declare type SyncStorage<Store> = {
-    getItem: (key: string) => string | Record<string, any> | null;
+    getItem: (key: string) => string | Record<string, any> | null | undefined;
     setItem: (key: string, value: string | Store) => void;
 };
 export declare type AsyncStorage<Store> = {
-    getItem: (key: string) => Promise<string | Record<string, any> | null>;
+    getItem: (key: string) => Promise<string | Record<string, any> | null | undefined>;
     setItem: (key: string, value: string | Store) => Promise<any>;
@@ -36,2 +36,2 @@ };
 };
-export declare function createStore<Store>({ initialStore, persist }: Config<Store>, initCallback?: () => void): FluxibleStore<Store>;
+export declare function createStore<Store>({ initialStore, persist }: Config<Store>, initCallback?: (store: Store) => void): FluxibleStore<Store>;

lib/index.js

@@ -41,2 +41,4 @@ "use strict";
                 });
+                if (initCallback)
+                    initCallback(store);
             });
@@ -57,5 +59,5 @@ }
             });
+            if (initCallback)
+                initCallback(store);
         }
-        if (initCallback)
-            initCallback();
     }
@@ -62,0 +64,0 @@ function updateStore(updatedStates) {

package.json

 {
   "name": "fluxible-js",
-  "version": "6.1.3",
+  "version": "6.1.4",
   "description": "Smaller, faster, better state management system that supports asynchronicity and state persistence out of the box.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -39,11 +39,15 @@ ![npm](https://img.shields.io/npm/dt/fluxible-js) ![npm](https://img.shields.io/npm/dm/fluxible-js) ![npm](https://img.shields.io/npm/dw/fluxible-js)
 const store = createStore({
-  initialStore,
-  persist: {
-    stringify: true,
-    syncStorage: window.localStorage,
-    restore: savedStore => ({
-      user: savedStore.user
-    })
-  }
-});
+    initialStore,
+    persist: {
+      stringify: true,
+      syncStorage: {
+        setItem: (key, value) =>
+          window.localStorage.setItem(key, value as string),
+        getItem: key => window.localStorage.getItem(key)
+      },
+      restore: savedStore => ({
+        user: savedStore.user
+      })
+    }
+  });
 ```
@@ -64,6 +68,10 @@
 
-const myStore = createStore({ initialStore });
+function initCallback () {
+  console.log('initialization complete');
+}
+
+const myStore = createStore({ initialStore }, initCallback);
 ```
 
-`createStore` function returns an instance of a `store` that has variety of methods in it. You can access the store's current value by via `myStore.store`.
+`createStore` function returns an instance of a `store` that has variety of methods in it. You can access the store's current value by via `myStore.store`. The 2nd parameter which is the `initCallback` is optional function that gets called after the store has been initialized, this is especially useful when using async storage.
 
@@ -74,3 +82,3 @@ ## Persisting states
 
-You need to tell `fluxible-js` which storage to use, a storage API must have a `getItem` and `setItem` methods in them. An example of this would be `window.localStorage`.
+You need to tell `fluxible-js` which storage to use, a storage API must have a `getItem` and `setItem` methods in them. An example of this would be [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) or [React-Async-Storage](https://react-native-async-storage.github.io/async-storage/docs/usage)
 
@@ -83,3 +91,3 @@ You also need to tell `fluxible-js` which states to persist, you can do this via the `restore` callback function.
 
-Storage like [react-native-async-storage](https://github.com/react-native-async-storage/async-storage) or [LocalForage](https://github.com/localForage/localForage). These are storage that return a `Promise` for the `setItem` and `getItem` methods.
+`setItem` and `getItem` should be async or should return a promise, pretty much like with [React-Native-Async-Storage](https://react-native-async-storage.github.io/async-storage/docs/usage)
 
@@ -91,17 +99,26 @@ ```ts
   token: null,
-  isLoggedIn: false
+  isLoggedIn: false,
+  initComplete: false
 };
 
-const store = createStore({
-  initialStore,
-  persist: {
-    stringify: true,
-    asyncStorage: RNAsyncStorage,
-    restore: (savedStore) => {
-      return {
-        token: savedStore.token
-      };
+const store = createStore(
+  {
+    initialStore,
+    persist: {
+      stringify: true,
+      asyncStorage: {
+        setItem: (key, value) => someAsyncStorage.setItem(key, value as string), // value will be a string because `stringify` is set to `true`
+        getItem: key => someAsyncStorage.getItem(key) // has to be a string because `stringify` is set to true
+      }
+      restore: (savedStore) => {
+        return {
+          token: savedStore.token
+        };
+      }
     }
+  },
+  () => {
+    store.updateStore({ initComplete: true });
   }
-});
+);
 ```
@@ -111,3 +128,3 @@
 
-Storage like `window.localStorage`. These are storage that doesn't return a `Promise` for their `getItem` and `setItem` methods.
+`getItem` and `setItem` should be sync, pretty much like with [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
 
@@ -126,3 +143,7 @@ ```ts
     stringify: true,
-    syncStorage: window.localStorage,
+    syncStorage: {
+      setItem: (key, value) =>
+        window.localStorage.setItem(key, value as string), // value will be a string because `stringify` is set to `true`
+      getItem: key => window.localStorage.getItem(key) // has to be a string because `stringify` is set to true
+    },
     restore: (savedStore) => {
@@ -137,2 +158,14 @@ return {
 
+If you don't care that much about typings, you can also just do:
+
+```ts
+syncStorage: window.localStorage as SyncStorage<typeof initialStore>,
+```
+
+or
+
+```ts
+syncStorage: ReactNativeAsyncStorage as AsyncStorage<typeof initialStore>,
+```
+
 ## Updating the store
@@ -154,3 +187,7 @@
     stringify: true,
-    syncStorage: window.localStorage,
+    syncStorage: {
+      setItem: (key, value) =>
+        window.localStorage.setItem(key, value as string),
+      getItem: key => window.localStorage.getItem(key)
+    },
     restore: (savedStore) => {
@@ -157,0 +194,0 @@ return {

No alert changes

Improved metrics

Total package byte prevSize

94368

increased by2.08%

Lines of code

2420

increased by0.58%

Number of lines in readme file

327

increased by12.76%

No dependency changes