@ackee/antonio-utils

@ackee/antonio-utils

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

Table of contents

• Install

• API

  • Effect creators

    • takeRequest
    • takeLatestRequest

  • Auth utils

    • setAuthHeader

• API (TypeDoc)

Install

yarn add @ackee/antonio-utils -S

API Reference

takeRequest(actionTypes: TakeRequest, saga: Function)

Parameters

• actionTypes: TakeRequest
  • REQUEST: ActionPattern - action type that launches the saga
  • CANCEL: ActionPattern - action type that aborts the running saga
• saga(requestAction, signal: Signal): 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: TakeLatestRequest, saga: Function)

Parameters

• params: TakeLatestRequest<RequestAction extends AnyAction, CancelAction extends AnyAction>
  • REQUEST: RequestAction['type'] - action type that launches the saga
  • cancelTask<A extends AnyAction = AnyAction>(requestId: RequestId, action: A): A; - Redux action that will cancel the running saga
  • requestIdSelector?(action: RequestAction): RequestId; - A function that receives request action as 1st arg. and returns unique ID of this action, e.g. user ID.
• saga(requestAction, signal: Signal): Function - the actual API request is made here

Example

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

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

    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 'signal' must be passed to the request config object:
function* fetchUser(requestAction, signal) {
    const { userId } = requestAction;
    const response = yield* api.get(`users/${userId}`, {
        signal,
    });

    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,
    );
}

setAuthHeader(headers: Headers, tokenValue?: string, tokenType: TokenType | string = TokenType.Bearer): void

Sets or deletes the Authorization header with provided tokenType and tokenValue:

const accessToken = 'eqwo123490ewqj123njir43';
const headers = new Headers();

setAuthHeader(headers, accessToken);

console.assert(headers.get('Authorization') === `Bearer eqwo123490ewqj123njir43`);