Merge pull request #64 from chrisdrackett/feature/nativeStore

add ability to use localStorageMixin in react-native

README.md

@@ -629,10 +629,16 @@ For examples, see the sections [Loading and rendering your first data](#loading-
 
 The `localStorageMixin` can be used to automatically safe the full state of the `RootStore`. By default the store is saved after every change, but throttle to be saved once per 5 seconds. (The reason for the trotthling is that, although snapshotting is cheap, serializing a a snapshot to a string is expensive).
 
-Two options are available: `throttle` (in milliseconds) and `storageKey` (the key to be used to store in the local storage).
+Options:
+
+- `storage` (the storage object to use. Defaults to `window.localStorage`)
+- `throttle` (in milliseconds)
+- `storageKey` (the key to be used to store in the local storage).
 
 Example:
 
+`models/RootStore.js`
+
 ```typescript
 const RootStore = RootStoreBase.extend(
  localStorageMixin({
@@ -642,6 +648,26 @@ const RootStore = RootStoreBase.extend(
 )
 ```
 
+### Use with react-native
+
+To use this mixin with react-native you can pass `AsyncStorage` to the mixin using the `storage` option:
+
+Example:
+
+`models/RootStore.js`
+
+```typescript
+import AsyncStorage from "@react-native-community/async-storage"
+
+const RootStore = RootStoreBase.extend(
+ localStorageMixin({
+ storage: AsyncStorage,
+ throttle: 1000,
+ storageKey: "appFluff"
+ })
+)
+```
+
 # 🙈 Examples 🙈
 
 ### Running the examples

src/localStorageMixin.ts

@@ -8,24 +8,27 @@ import {
 
 // TODO: support skipping parts of the store, with a key filter for example
 type LocalStorageMixinOptions = {
+ storage?: {
+ getItem(key: string): string | null | Promise<string | null>
+ setItem(key: string, data: string): void
+ }
  throttle?: number // How often the snapshot is written to local storage
  storageKey?: string
 }
 export function localStorageMixin(options: LocalStorageMixinOptions = {}) {
+ const storage = options.storage || window.localStorage
  const throttleInterval = options.throttle || 5000
  const storageKey = options.storageKey || "mst-gql-rootstore"
  return (self: StoreType) => ({
  actions: {
- afterCreate() {
- const data = window.localStorage.getItem(storageKey)
+ async afterCreate() {
+ const data = await storage.getItem(storageKey)
  if (data) {
  const json = JSON.parse(data)
  const selfType = getType(self)
  if (!selfType.is(json)) {
  console.warn(
- `Data in local storage does not conform the data shape specified by ${
- selfType.name
- }, ignoring the stored data`
+ `Data in local storage does not conform the data shape specified by ${selfType.name}, ignoring the stored data`
  )
  return
  }
@@ -36,7 +39,7 @@ export function localStorageMixin(options: LocalStorageMixinOptions = {}) {
  onSnapshot(
  self,
  throttle((data: any) => {
- window.localStorage.setItem(storageKey, JSON.stringify(data))
+ storage.setItem(storageKey, JSON.stringify(data))
  }, throttleInterval)
  )
  )