Complete Example

import { Store } from 'diox';

const moduleA = {
  state: { count: 0 },
  mutations: {
    ADD({ state }) {
      return {
        count: state.count + 1,
      };
    },
  },
};

const moduleB = {
  state: { count: 1000 },
  mutations: {
    SUB({ state }) {
      return {
        count: state.count - 1,
      };
    },
  },
  actions: {
    asyncSub({ id, mutate }) {
      setTimeout(() => { mutate(id, 'SUB'); }, 1000);
    },
  },
};

const store : Store = new Store();

store.use((newState) => {
  console.log('New state !', newState);
});

store.register('a', moduleA);
store.register('b', moduleB);

store.combine('c', ['a', 'b'], (newAState, newBState) => ({
  a: newAState.count,
  b: newBState
}));

store.subscribe('a', (newState) => {
  console.log('New state from a !', newState);
});

store.subscribe('c', (newState) => {
  console.log('New state from c !', newState);
});

store.mutate('a', 'ADD');
store.dispatch('b', 'asyncSub');

The above example will display in console :

New state ! { count: 0 }
New state ! { count: 1000 }
New state from a ! { count: 0 }
New state from c ! { a: 0, b: { count: 1000 } }
New state ! { count: 1 }
New state from a ! { increment: 1 }
New state from c ! { a: 1, b: { count: 1000 } }
New state ! { count: 999 }
New state from c ! { a: 1, b: { count: 999 } }

Last updated