Ts-Store

A state management Library inspired by Vuex

Usage

1import CreateStore from "vanilla-ts-store";
2
3const exampleStoreInstance = new CreateStore<{
4  count: number;
5}>({
6  state: {
7    counter: 0,
8  },
9  mutations: {
10    increment(state, num: number) {
11      state.count = num;
12      console.log("increment called", state);
13    },
14  },
15});

State

1import CreateStore from "vanilla-ts-store";
2
3interface StateInterface {
4  count: number;
5  name: string;
6}
7
8const exampleStoreInstance =
9  new CreateStore() <
10  StateInterface >
11  {
12    state: {
13      counter: 0,
14      name: "Jimmy",
15    },
16    mutations: {
17      increment(state, num: number) {
18        state.count = num;
19        console.log("increment called", state);
20      },
21      changeName(state) {
22        state.name = "Ade";
23      },
24    },
25  };
26
27console.log(exampleStoreInstance.getState); // {counter: 0, name: "jimmy"}

Mutations

State are only allowed to be modified through mutations as state is immutable

1import CreateStore from "vanilla-ts-store";
2
3interface StateInterface {
4  count: number;
5  name: string;
6}
7
8const exampleStoreInstance =
9  new CreateStore() <
10  StateInterface >
11  {
12    state: {
13      counter: 0,
14      name: "Jimmy",
15    },
16    mutations: {
17      increment(state, num: number) {
18        state.count = num;
19        console.log("increment called", state);
20      },
21      changeName(state) {
22        state.name = "Ade";
23      },
24    },
25  };
26
27console.log(exampleStoreInstance.getState); // {counter: 0, name: "jimmy"}
28exampleStoreInstance.getState.count = 1; // does nothing
29exampleStore.commit("increment", 2); // {counter: 2, name: "jimmy"}
30exampleStore.commit("changeName"); // {counter: 2, name: "Ade"}

Getters

Getter functions are used to assess some property of a state

1import CreateStore from "vanilla-ts-store";
2
3interface StateInterface {
4  count: number;
5  name: string;
6  todo: any[];
7  words: string[];
8}
9
10const exampleStoreInstance =
11  new CreateStore() <
12  StateInterface >
13  {
14    state: {
15      count: 0,
16      name: "John",
17      words: ["state"],
18      todo: [
19        { id: 1, title: "wash clothes", completed: false },
20        { id: 2, title: "watch movie", completed: true },
21      ],
22    },
23    mutations: {
24      increment(state, num: number) {
25        state.count = num;
26        console.log("increment called", state);
27      },
28      decrement(state) {
29        state.count--;
30        console.log("decrement called", state);
31      },
32    },
33    getters: {
34      getCount(state) {
35        return state.count;
36      },
37      getCountsPlus(state) {
38        return state.count + 2;
39      },
40      getTodo(state, id) {
41        return state.todo.find((i) => i.id === id);
42      },
43    },
44  };
45
46exampleStoreInstance.getters("getCount"); // 0
47exampleStoreInstance.getters("getTodo", 1); // { id: 1, title: "wash clothes", completed: false },
48exampleStoreInstance.commit("increment", 5); //modify count state
49exampleStoreInstance.getState; // {...state} returns state objects

Subscriptions

Subscriptions are used to to actively listen for state changes.

1import CreateStore from "vanilla-ts-store";
2
3interface StateInterface {
4  count: number;
5  name: string;
6  todo: [];
7  words: string[];
8}
9
10const exampleStoreInstance =
11  new CreateStore() <
12  StateInterface >
13  {
14    state: {
15      count: 0,
16      name: "John",
17      words: ["state"],
18      todo: [
19        { id: 1, title: "wash clothes", completed: false },
20        { id: 2, title: "watch movie", completed: true },
21      ],
22    },
23    mutations: {
24      increment(state, num: number) {
25        state.count = num;
26        console.log("increment called", state);
27      },
28      decrement(state) {
29        state.count--;
30        console.log("decrement called", state);
31      },
32    },
33    getters: {
34      getCount(state) {
35        return state.count;
36      },
37      getCountsPlus(state) {
38        return state.count + 2;
39      },
40      getTodo(state, id) {
41        return state.todo.find((i) => i.id === id);
42      },
43    },
44  };
45
46const statesToWatch = ["count", "name"];
47
48exampleStoreInstance.subscribeEvents(
49  (prevState, changes) => {
50    console.log("previous state", prevState);
51    console.log("changes made", changes);
52  },
53  [statesToWatch]
54);
55
56setInterval(() => {
57  exampleStoreInstance.commit("increment", 2);
58}, 2000);

To cancel subscriptions to an event,

1exampleStoreInstance.disableEventListeners();