Setting up your store

Your store is created by first declaring your types, and then instantiating your store values. Typically, you will keep your store in a separate file for easier reference; however, this is not strictly required.

Here is an example store:

import { CreateTable, CreateStore } from '@datahook/trigger';

// declare a table type
type Person = {
    id: number;
    name: string;
    age: number;
}

// create the store
export const store = CreateStore({
    person: CreateTable<Person>(['id', 'name', 'age']),
});

In the example above, half of the code is for declaring our table and store types. We first create a type called Person to represent a table in our store.

Once we have a our types declared, we can then create our store, along with the initial values for our tables. In this example, the initial table is empty, which is why we pass just the column names.

If our table had singles and queues, the store would look something like this:

import { CreateSingle, CreateTable, CreateQueue, CreateStore } from '@datahook/trigger';

// declare a table type
type Person = {
    id: number;
    name: string;
    age: number;
}

// create the store
export const store = CreateStore({
    person: CreateTable<Person>(['id', 'name', 'age']),
    activeTab: CreateSingle<number>(0),
    eventQueue: CreateQueue<string>(),
});

Notice how when we declare our store we use the Table, Single, and Queue types, and when we create our store we use the CreateTable(), CreateSingle(), and CreateQueue() functions.

You can add as many tables, singles, and queues as you like to your store. It is common for singles to be used for UI type information (e.g., active tab) and for queues to be used for event processing - similar to how you would use a regular reducer function. This basic structure is how all of your stores will be setup, with most of the complexity coming from declaring your types.

You can also create nested properties in your store for improved namespacing. For instance, our previous store could be declared as the following:

import { CreateSingle, CreateTable, CreateQueue, CreateStore } from '@datahook/trigger';

// declare a table type
type Person = {
    id: number;
    name: string;
    age: number;
}

// create the store
const store = CreateStore({
    tables: {
        person: CreateTable<Person>(['id', 'name', 'age']),
    },
    singles: {
        activeTab: CreateSingle<number>(0),
    },
    queues: {
        eventQueue: CreateQueue<string>(),
    }
});

export { tables, singles, queues } = store;

Notice how we can now pull apart the tables, singles, and queues for clarity when importing the store into our components.