Overview

Promise Saga is a side effects orchestrator boasting several competitive qualities:

1. Strongly typed - we embrace Typescript for its strong typing capabilities.
2. Agnostic but pluggable - while Promise Saga is agnostic to specific libraries, it has a set of plugins for popular libraries like Redux and Zustand.
3. In-component saga usage - sagas can be manually cancelled or automatically cancelled upon the unmount of a React component.
4. Cancellable network requests out of the box - we provide plugins for fetch and Axios that support cancellable network requests.

Use the command below to install:

npm install promise-saga

And you're ready to write sagas like this:

// create saga by wrapping an async function
export const listenTodoToggles = createSaga(async function() {
    for (let i = 1; ; i++) {
        // use effects inside to control its flow
        await this.take(Todos.actions.toggleTodo); // wait for Redux action to happen

        if (i % 3 === 0) {
            const todos = this.select(getTodos); // select from Redux store
            const isAllCompleted = todos.every((todo) => todo.isCompleted);

            await this.delay(500);
            console.log(`Toggled ${i} todos!`, {isAllCompleted});
            await this.dispatch(doneAction()); // dispatch Redux action
        }
    }
});

export function TodosContainer() {
    // call sagas within a component
    const saga = useSaga(listenTodoToggles);

    return (
      <>
        <input
          type="checkbox"
          onChange={saga.toggle}
          checked={saga.isRunning}
        />
        
        Todos
      </>
    );
}

Interested? See the following sections for more information.