Skip to main content
Plugins are functions that are called at specific points in the Store lifecycle. They can be used to add additional functionality to the Store.

​
Creating a Plugin#

A plugin is basically a class that implements the Plugin interface. This interface contains the following methods:
  • onReady(): Called when the Store is ready.
  • onSave(): Called when a value is saved or updated in the Store.
  • onRead(): Called when a value is read from the Store.
  • onReducerInvoke(): Called when a reducer is called.
  • onReset(): Called when the Store is reset.
Example: 
class MyPlugin implements Plugin {
  onReady(state) {
    console.log('Store is ready');
  }

  onSave(state) {
    console.log('The updated state is ', JSON.stringify(value));
  }

  onRead(state) {
    // 
  }

  onReducerInvoke(state) {
    // 
  }

  onReset(state) {
    // 
  }
}

​
Using a Plugin#

To use a plugin, you need to pass it to the createStore() function as part of the configuration object. This object takes in a plugins property which is an array of plugins to use with the Store. 
import { createStore } from '@hanabira/store';

const store = createStore({
  plugins: [MyPlugin],
});
Depending on the plugin, you may need to pass some options to it. For example, the Persisted State plugin can take options to exclude certain values from being persisted. For those cases, you may want to pass an initialized instance of the plugin to the createStore() function. 
import { createStore } from '@hanabira/store';

const store = createStore({
  plugins: [new MyPlugin({ ...options })],
});