@drodsou/global-context v0.1.14

@drodsou/global-context

Javascript alternative to Redux / Global Context API to provide global state management / actions reducer / undo / localStorage state permanency

why

Because Global Context API of React only allows you to useContext inside of a component, not an arbitrary module.

Also setState not being synchronous is a source of pain.

Here you have a plain object app.state, that you can export/import to JSON freely, manipulate however you need in your custom 'action' multiple times and only triggering uiupdate after all modifications are done.

Also after the action you know the state has synchronously changed so you can rely on it from anywhere else immediately.

If you dont like the inmutability concept, or find the automatic triggering when a piece of state changes like with mobx or Vue builtin reactivity, this is for you, small and easy to grasp source code.

And you can use this library with any js framework.

compatible with:

Directly compatible with React. Any other framework too definining updateUI() -see usage non react apps bellow

installation

npm install @drodsou/global-context

initialization

Create file myGlobalContext.js:

const {app} = require('@drodsou/global-context');

app.init({
  UUID : 'appXXX',
  state : { count:5 },
  actions : {
    inc() { app.state.count++;  }
  },
  custom : {  anotherThing: 'indeed' },
  autoSave : true,
  undo : 10
});

module.exports = {app};

usage in your app

React apps

In your root React element

import {app} from './myGlobalContext'
// ... in constructor
app.connectReact(this);  // to update UI from state
// ... in componentDidMount
app.load();  // to load localStorage previous state if exists.

Non React apps

define app.updateUI() so it triggers an UI update. This function will be called automatically after every app.action()

Rest of modules, any frameworks

In any other component module:

import {app} from './myGlobalContext';

app.state.whatever;  // get state
app.action('someAction',{optActionProp}); // change state

built-in behaviour

1) saves to localStorage after every action (autoSave option)

2) saves previous app states, which you can go back with app.undo()(undo option to limit number of undo states stored, default 10, 0 for none)