@xhtm/store

lightweight state container for xhtm applications

Features

• lightweight solution suitable for slow 3G connections
• familiar ideas from redux like libraries
• framework independent use it with or without a framework

Usage

import { store, dispatch, update } from '@xhtm/store';

/** initialize store with initial state and actions */
store.init(
  { count: 10 },
  {
    up: state => ({ count: state.count + 1 }),
    down: state => ({ count: state.count - 1 }),
    upBy: (state, by) => ({ count: state.count + by }),
  },
);

/** setup subscriptions as/if needed */
const unsub = store.on(state => console.log('current state :', state));

/** dispatch an action */
dispatch('up'); // current state : {count: 11}

/** remove subscription, using bound unsubscribe */
unsub();

/** dispatch an action with payload */
dispatch('upBy', 5); // current state : {count: 16}

/** get current state */
console.log('current state :', store.state); // current state : {count: 16}

/** re-initialize the store if/as needed (keeps the old state & actions) */
store.init(
  {},
  {
    /** async actions using promise */
    getUsers: state =>
      fetch('/users.json')
        .then(res => res.json())
        .then(users => ({ users })),
    /** async actions using async/await */
    getPosts: async state => {
      const res = await fetch('/posts.json');
      return { posts: await res.json() };
    },
  },
);

dispatch('getUsers');
// (state after promise resolution)
// current state : {count: 17, users: Array(7)}

dispatch('getPosts');
// (state after promise resolution)
// current state : {count: 17, users: Array(7), posts: Array(5)}

/** manually override state */
update({ count: 17 }, 'MANUAL'); // current state : {count: 17}

Motivations

• I really love redux workflow, but the implementation often leads to lot of boilerplate code. This library attempts to aliviate that problem without introducing any magic.

Tradeoffs

• We are essentially dispatching actions using a 'string' name of those actions. This breaks the code factoring offered by many IDEs. When you change the name of an action, you have to manually rename dispatch calls to use the new name.

Enhancements/Roadmap

• [ ] Full Server Rendering Support with Client Side Hydration.
• [ ] I want to explore what a plugin system for @xhtm/store might look like. This could come really handy when implementing common application concerns such as analytics, authentication (attaching auth header for every API call), etc.

Acknowledgement

@xhtm/store is heavily inspired by beedle and unistore

Contributing

Scaffolded using tslib-cli.

Run yarn or npm install in root folder to setup your project.

Available Commands:

yarn build # builds the package
yarn test # run tests for the package
yarn coverage # run tests and generate coverage reports
yarn pub # publish to NPM
yarn format # prettier format
yarn lint # lint pkg files
yarn setup # clean setup

License

MIT License @ osdevisnot