ibitcy/react-stores

Shared states for React and React Native

react-stores's Issues

only work on browser?

ReferenceError: window is not defined

import { useStore, Store } from 'react-stores';
import { ICachedJSONRowPlus } from 'build-json-cache/lib/types';

export interface IDataListStoreState
{
	dataList: ICachedJSONRowPlus[]
}

export const dataListStore = new Store<IDataListStoreState>({
	dataList: [],
});

export default dataListStore

console.log(dataListStore.state.dataList);

https://github.com/ibitcy/react-stores/search?q=window&unscoped_q=window

Lifecycle methods are not executing

I'd like to update my shared state whenever my props are updated, like this:

  storeComponentWillReceiveProps(nextProps: Props) {
    let { sharedState } = this
    let { markers } = sharedState
    this.checkMissingMarkers(markers, (nextProps.selectedTreatment || {} as any).markers)
  }

  checkMissingMarkers(oldMarkers: Marker[], newMarkers: Marker[]) {
    const { props } = this
    if (newMarkers.length && newMarkers.length > oldMarkers.length) {
      this.addMissingMarkers(newMarkers)
    }
  }

  /**
   * Invoked if new markers appeared in props (maybe just finished fetching treatment).
   */
  addMissingMarkers(syncWith: Marker[]) {
    console.log("Updating shared state with new markers", syncWith)
    //  this.setSharedState(...)
  }

Though storeComponentWillReceiveProps never fires. I can log the props in render and it works just fine, they look as expected. I've also tried with getSnapshotBeforeUpdate and componentWillReceiveProps, and I've not combined any of the three as I'm aware they don't play well together.

package.json:

{
  "name": "******",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "classnames": "^2.2.6",
    "js-cookie": "^2.2.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "react-stores": "^2.10.1",
    "uuid": "^3.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@types/classnames": "^2.2.7",
    "@types/js-cookie": "^2.2.2",
    "@types/node": "^11.12.2",
    "@types/react": "^16.8.10",
    "@types/react-dom": "^16.8.3",
    "@types/react-router": "^4.4.5",
    "@types/react-router-dom": "^4.3.1",
    "@types/uuid": "^3.4.4",
    "node-sass": "^4.11.0",
    "typescript": "^3.4.1"
  }
}

The component class extends StoreComponent<Props, State, StoreState>.

Running Chrome Version 73.0.3683.86 (Official Build) (64-bit) macOS.

Any ideas?

Array Stores get Converted to Objects When Retrieving State

Arrays seem to be passed into writeAsync as objects.

For example: I will make a store using an array type like this:

const store = new Store<Array<string>>(...)

So my data will look like this

[ {...}, {...}, {...} ]

But when WriteAsync was triggered by calling setState(myArray) on my store then the pack: StorePersistentPacket<T> argument returned the array as on object with integers as strings for keys.

{ "data": { "0": {...} }, { "1": {...} }, { "2": {...} } }

Wrapping the array type with an object works around this problem but is not ideal.

const store = new Store<{list: Array<string>}>(...)

Custom Async Persistence Driver Not Restoring State on App Reload

I'm using this library within React Native and I've setup my store like this

new Store<Array<MyType>>([], {asyncPersistence: true, immutable: true}, asyncPersistenceFactory("myName"))

And my persistence driver like this

class AsyncPersistenceDriver<T> extends StorePersistentDriverAsync<T>
{
  public type: string;
  private storage: IStorage;

  constructor(name: string, storage: IStorage, type: string, lifetime = Infinity)
  {
    super(name, lifetime);
    this.type = type;
    this.storage = storage;
  }

  async writeAsync(pack: StorePersistentPacket<T>): Promise<any> {
    await this.storage.setItem(this.storeName, JSON.stringify(pack));
    return pack;
  }
  async readAsync(): Promise<StorePersistentPacket<T> | undefined> {
    const raw = await this.storage.getItem(this.storeName);
    return raw ? JSON.parse(raw) : undefined;
  }
  clear(): void {
    this.storage.removeItem(this.storeName);
  }
}

const mmkvStorage: IStorage = {
  getItem: async (name) => MMKV.getString(name),
  setItem: async (name, data) => MMKV.set(name, data),
  removeItem: async (name) => MMKV.delete(name),
}

export const asyncPersistenceFactory = <T>(name: string) =>  
{
  return new AsyncPersistenceDriver<T>(name, mmkvStorage, "mmkv");
}

When the store is created the data from the persistence driver isn't read and the state isn't restored. Have I done something wrong here? The storage driver is writing data on state change but it isn't reading the storage when the store is created.