Extend the Store

Teeny Store is designed to be flexible and adaptable. You can extend Teeny Store to add custom behavior or tailor its functionality to your specific needs.

Teeny Store can be extended through plugins, which are simple functions that build on top of its core behavior. Plugins allow us to add new capabilities and behavior in a clean way.

The plugin function follows this signature:

const plugin = (getState, setState, effectProcessor, queue) => {
  // ...
  return {
    // ...
  };
};

Parameter	Description
getState	The function to get the current state in the store.
setState	The function to update the state and trigger side effects.
effectProcessor	The processor used by the store to manage, track, and trigger effects.
queue	The queue used by the store to process scheduled effects.

The plugin function can optionally return an object containing custom properties/methods, which will be automatically merged into the store instance.

You can register the plugin to the store's definition like this.

const builder = defineStore().use(plugin);

And then create the store instance using that builder.

const store = builder.create();

The plugin function will then be called on store initialization.

For example, let's take a quick look at the persistence plugin.

const persistencePlugin = (getState, setState, effectProcessor) => {
  // ...
  const configurePersistence = (options) => { /** ... */};
  const loadFromPersistence = (options) => { /** ... */};
  const removeStorage = () => { /** ... */};
  const initializePersistence = () => { /** ... */};
  initializePersistence();

  return {
    persist: configurePersistence,
    loadFromPersistence,
    dropPersistence: removeStorage,
  };
};

When we do:

const store = defineStore().use(persistencePlugin).create();

The persistence plugin will get called with getState, setState, and effectProcessor provided by the store. The plugin then immediately runs the initializePersistence function to enable state persistence. The custom methods returned from the plugin are made available on the store instance.

---

In addition to plugins, the Teeny Store builder provides setEffectProcessor, setEffectService, and setComputationService methods that allow us to customize how side effects are managed and controlled.

For details on all available options and methods, see the API Reference.