A minimum and lightweight external store for React and React Native application

import { Store } from '@mcsheffey/reactive-store';

const store = new Store();

//init data

store.add('count', 0);

import { StoreInjector } from '@mcsheffey/reactive-store';

const Component = () => {
  return <div></div>;
};
export const App = StoreInjector(store, Component);
//or
export const App = StoreInjector(store, () => {
  return <div></div>;
});

export const App = StoreInjector([countStore, todoStore], () => {
  return <div></div>;
});

//this will not rerender component

store.add('blah', 'hmmm???');

//this two above will trigger component to rerender
store.update('count', count + 1);
store.remove('count');

import * as React from 'react';
import { StoreInjector, Store } from '@mcsheffey/reactive-store';

const store = new Store();
store.add('count', 0);

const Component = () => {
  //Memo count 'state'
  const countMemo = React.useCallback(() => {
    return store.get('count');
  }, []);
  //Effect on memo
  React.useEffect(()=>{
     console.log("count change")
  },[countMemo()])
  return <p>{countMemo()}</p>;
};

export const App = StoreInjector(store, Component);

import {
  DispatchAction,
  Store,
  StoreInjector,
} from '@mcsheffey/reactive-store';

export const store = new Store();

store.applyMiddleware(
  (key: string, current: any, payload: any, type: DispatchAction) => {
    console.log(key, current, payload, type);
  }
);

store.add('count', 0);
for (let i = 0; i < 2; i++) {
  const count = store.get('count');
  store.update('count', count++);
}
store.remove('count');
/*
Log:
"count" 0 undefined "add"
"count" 0 1 "update"
"count" 1 2 "update"
"count" 2 undefined "remove"
*/

store.applyMiddleware(
  (key: string, current: any, payload: any, type: DispatchAction) => {
    //abort action if count > 5
    if (count > 5) {
      return false;
    }
  }
);

store.add('count', 0);
for (let i = 0; i < 10; i++) {
  const count = store.get('count');
  store.update('count', count++);
}

import {
  Store,
  StoreInjector,
  DispatchAction,
} from '@mcsheffey/reactive-store';

const store = new Store();

store.applyMiddleware(
  (key: string, current: any, payload: any, type: DispatchAction) => {
    console.log(key, current, payload, type);
    if (count > 5) {
      return false;
    }
  }
);

const keys = {
  count: 'count',
};
/*Add data to store*/
store.add(keys.count, 0);

const Component = () => {
  /*Get data from store */
  const count: number = store.get(keys.count);
  return (
    <div className="App">
      <button onClick={() => store.update(keys.count, count + 1)}>+</button>
    </div>
  );
};

const App = StoreInjector(store, Component);

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);