@ackee/antonio-utils

@ackee/antonio-utils

Custom Saga effects with built-in cancelation of API requests.

Table of contents

• Install

• API

  • Effect creators

    • takeRequest(actionTypes, saga)
    • takeLatestRequest(params, saga)

---

Install

yarn add @ackee/antonio-utils -S

---

API Reference

takeRequest(actionTypes: Object, saga: Function)

Parameters

• actionTypes: Object
  • REQUEST: String - action type that launches the saga
  • CANCEL: String - action type that aborts the running saga
• saga(requestAction, cancelToken): Function - the actual API request is made here

Example

import { takeRequest } from '@ackee/antonio-utils';

export default function* () {
    // Works same as the Redux saga take effect, but on top of that, it cancels the API request.
    yield takeRequest(
        {
            REQUEST: 'FETCH_TODO_ITEM_REQUEST',
            CANCEL: 'FETCH_TODO_ITEM_INVALIDATE',
        },
        fetchTodoItem,
    );
}

---

takeLatestRequest(params: Object, saga: Function)

Parameters

• params: Object
  • REQUEST: String - action type that launches the saga
  • cancelTask: Function - Redux action that will cancel the running saga
  • requestIdSelector: Function (optional) - A function that receives request action as 1st arg. and returns unique ID of this action, e.g. user ID.
• saga(requestAction, cancelToken): Function - the actual API request is made here

Example

import { takeLatestRequest } from '@ackee/antonio-utils';

// The 'cancelToken' must be passed to the request config object:
function* fetchTodoItem(requestAction, cancelToken) {
    const response = yield api.get(`todos/1`, {
        cancelToken,
    });

    return response.data;
}

const fetchTodoItemInvalidate = () => ({
    type: 'FETCH_TODO_ITEM_INVALIDATE',
});

export default function* () {
    // Works same as the Redux saga takeLatest effect, but on top of that, it cancels the API request.
    yield takeLatestRequest(
        {
            REQUEST: 'FETCH_TODO_ITEM_REQUEST',
            cancelTask: fetchTodoItemInvalidate,
        },
        fetchTodoItem,
    );
}

Example - take latest request for certain user

If requestIdSelector function provided, instead of cancelling of all previous requests and taking only the last one for certain action type, take the lastest request for certain user, i.e. identify the request by action type and by an ID.

import { takeLatestRequest } from '@ackee/antonio-utils';

// The 'cancelToken' must be passed to the request config object:
function* fetchUser(requestAction, cancelToken) {
    const { userId } = requestAction;
    const response = yield api.get(`users/${userId}`, {
        cancelToken,
    });

    return response.data;
}

const fetchUserInvalidate = userId => ({
    type: 'FETCH_USER_INVALIDATE',
    userId,
});

export default function* () {
    // Works same as the Redux saga takeLatest effect, but on top of that, it cancels the API request.
    yield takeLatestRequest(
        {
            REQUEST: 'FETCH_USER_REQUEST',
            cancelTask: fetchUserInvalidate,
            requestIdSelector: action => action.userId,
        },
        fetchUser,
    );
}

Changelog

4.0.0-beta.2 (2021-05-05)

Added

• ✨ Add polyfill for AbortController [5069fa2]
• ➕ Add loglevel dependency [cba50e0]

<a name="4.0.0-beta.1"></a>