actions.md

Actions

ℹ️ TODO: This documentation is in progress.

The actions are a way more precise to handle the state of a store. This is a powerful feature of Storux inspired by the Flux pattern.

In the Flux pattern the actions are the conventional way of interacting with the state of a store.

The actions are executed one by one, in the order of call. Even if the previous action is longer than the next one, the actions are put on hold in a queue. The next action is called only when the first dispatched, that all hooks (if there are) have finished their treatments on the state.

Flux pattern (from the React.js documentation).

The definition of an action in a store is made easy with Storux.

Storux offers 2 ways, choice with a function or a decorator.

Create actions with a function

Short example with 3 actions:

// myStore.js

import {Storux, Store} from 'storux';
import storux from './path/to/your/storuxInstance';

class MyStore extends Store {
  constructor(opt) {
    super(opt);

    this.scope.initialState: {
      user: null,
      err: null,
      counter: 0,
    };

    // mount 3 actions
    this.scope.mountActions({
      count: this.count,
      fetchUser: this.fetchUser,
      createUser: this.createUser,
    });
  }

  /**
   * Action: Increment the counter.
   *
   * @return {Promise} Resolve the new counter value.
   */
  count() {
    let counter = this.getState().count + 1;

    this._save({counter});
    return counter;
  }

  /**
   * Action: Fetch an user by ID.
   *
   * @param {string} id User ID.
   * @return {Promise} Resolve the user.
   */
  fetchUser(id) {
    return axios
      .get('/user/' + id)
      .then((res) => this._save({user: res.data}))
      .catch((err) => this._save({user: null, err}));
  }

  /**
   * Action: Create an user.
   *
   * @param {string} user User data.
   * @return {Promise} Resolve the newest user.
   */
  createUser(user) {
    return axios
      .post('/user', user)
      .then((res) => this._save({user: res.data}))
      .catch((err) => this._save({user: null, err}));
  }
}

export default storux.create(MyStore);

Create actions with a decorator

The same with the decorator @action.

// myStore.js

import {Storux, Store, action} from 'storux';
import storux from './path/to/your/storuxInstance';

class MyStore extends Store {
  constructor(opt) {
    super(opt);

    this.scope.initialState: {
      user: null,
      err: null,
      counter: 0,
    };
  }

  /**
   * Action: Increment the counter.
   *
   * @return {Promise} Resolve the new counter value.
   */
  @action('count')
  count() {
    let counter = this.getState().count + 1;

    this._save({counter});
    return counter;
  }

  /**
   * Action: Fetch an user by ID.
   *
   * @param {string} id User ID.
   * @return {Promise} Resolve the user.
   */
  @action('fetchUser')
  fetchUser(id) {
    return axios
      .get('/user/' + id)
      .then((res) => this._save({user: res.data}))
      .catch((err) => this._save({user: null, err}));
  }

  /**
   * Action: Create an user.
   *
   * @param {string} user User data.
   * @return {Promise} Resolve the newest user.
   */
  @action('createUser')
  createUser(user) {
    return axios
      .post('/user', user)
      .then((res) => this._save({user: res.data}))
      .catch((err) => this._save({user: null, err}));
  }
}

export default storux.create(MyStore);

CRUD with actions

Below an implementation proposal to request an API server.

TODO: Doc in progress

Summary

At this point, you've successfully learned the core concepts, the behavior of the store state and created the store actions with 2 different flavors.

Further we will see the events to interact with the lifecycle of the actions and states in Storux.

The next chapter explores the hooks, a useful complement to the actions to manipulate the store's state.