react-fluxible - npm Package Compare versions

Comparing version 6.0.5 to 6.0.6

package.json

 {
   "name": "react-fluxible",
-  "version": "6.0.5",
+  "version": "6.0.6",
   "description": " Connector for react-js and fluxible-js.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -53,3 +53,3 @@ ![npm](https://img.shields.io/npm/dt/react-fluxible) ![npm](https://img.shields.io/npm/dm/react-fluxible) ![npm](https://img.shields.io/npm/dw/react-fluxible)
 
-```ts
+```tsx
 import { createStore } from 'fluxible-js';
@@ -86,2 +86,52 @@ import { createFluxibleHook } from 'react-fluxible';
 
+#### Example with state persistence using react-native-async-storage
+
+```tsx
+import { createStore, AsyncStorage as TAsyncStorage } from 'fluxible-js';
+import { createFluxibleHook } from 'react-fluxible';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const initialStore = {
+  token: null,
+  isLoggedIn: false,
+  initComplete: false
+};
+
+const globalStore = createStore(
+  {
+    initialStore,
+    persist: {
+      stringify: true,
+      asyncStorage: AsyncStorage as TAsyncStorage<typeof initialStore>,
+      restore: (savedStore) => {
+        return {
+          token: savedStore.token
+        };
+      }
+    }
+  },
+  () => {
+    globalStore.updateStore({ initComplete: true });
+  }
+);
+
+const useGlobalStore = createFluxibleHook(globalStore);
+
+// to connect a component to the store
+function MyComponent () {
+  const { token, isLoggedIn, initComplete } = useGlobalStore((store) => {
+    return {
+      token: store.token,
+      isLoggedIn: store.isLoggedIn,
+      initComplete: store.initComplete
+    };
+  })
+
+  // do something with the `token` and `isLoggedIn`
+
+  if (!initComplete) return <p>Initializing store...</p>
+  return <p>Hello world</p>;
+}
+```
+
 # Migrating from v5 to v6
@@ -88,0 +138,0 @@

No alert changes

Improved metrics

Total package byte prevSize

10052

increased by13.3%

Number of lines in readme file

157

increased by46.73%

No dependency changes