@ackee/antonio-utils 中文文档教程

Question

@ackee/antonio-utils

内置取消 API 请求的自定义 Saga 效果。

Table of contents

• 安装

• 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

如果提供了requestIdSelector 函数，而不是取消所有以前的请求并只对特定操作类型取最后一个请求，取对特定用户的最新请求，即通过操作类型和通过身份证。

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

使用提供的 tokenType 和 tokenValue 设置或删除 Authorization 标头：

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

setAuthHeader(headers, accessToken);

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