Thunk

Defines a thunk against your model. Thunks can be synchronous or asynchronous. To enable asyncronous behaviour within a thunk simply use async/await or return a Promise from the thunk.

Thunks are typically used to encapsulate side effects, however, you can also use them to introduce complex workflows around action dispatches.

API

Thunk<
  Model extends object = {},
  Payload = void,
  Injections = any,
  StoreModel extends object = {},
  Result = any
>
  • Model

    The model against which the thunk is being defined. You need to provide this so that the actions that will be provided to your thunk are correctly typed.

  • Payload

    The type of the payload that the thunk will receive. You can omit this if you do not expect the thunk to receive any payload.

  • Injections

    If your store was configured with injections, and you intend to use them within your thunk, then you should provide the type of the injections here.

  • StoreModel

    If you plan on using the getStoreState or getStoreActions APIs of a thunk then you will need to provide your store model so that the results are correctly typed.

  • Result

    If your thunk returns a value then the type of the value should be defined here. The result is returned to the calling point of the dispatch.

Example

import { Thunk, thunk } from 'easy-peasy';
import { Injections } from './index';

interface TodosModel {
  todos: string[];
  savedTodo: Action<TodosModel, string>;
  saveTodo: Thunk<TodosModel, string, Injections>;
}

const todosModel: TodosModel = {
  todos: [],
  savedTodo: action((state, payload) => {
    state.todos.push(payload);
  }),
  saveTodo: thunk(async (actions, payload, { injections }) => {
    await injections.todosService.save(payload);
    actions.savedTodo(payload);
  })
}