@abramstyle/redux-api 中文文档教程

Question

Redux API

进行 api 调用的 redux 中间件，但带有中间件。

usage

install

yarn add @abramstyle/redux-api

quick start

import {createStore, applyMiddleware } from 'redux';
import reduxApiGenerator from '@abramstyle/redux-api';

const reduxApi = reduxApiGenerator();
const middlewares = [reduxApi];
const store = createStore(reducers, applyMiddlewares(middlewares));

API

reduxApiGenerator(options = {})

它返回一个 reduxMiddleware

options.before

函数，该函数将在请求之前转换 fetchOptions。

您可以为每个请求做一些常见的事情。

options.middleware

定义全局中间件就像callAPI.middleware

options.isSuccess

定义全局成功检查器就像callAPI.isSuccess

options.success

定义全局成功回调就像callAPI.success

options.failure

定义全局失败回调就像 callAPI.failure

CALL_API Action

example

一个 api 请求操作具有 [CALL_API] 属性。 它指定了请求信息。

import {CALL_API} from '@abramstyle/redux-api';
const action = {
  [CALL_API]: {
    url: 'https://api.domain.com',
    types: [
      'REQUEST_TYPE',
      'SUCCESS_TYPE',
      'FAILURE_TYPE'
    ],
  }
};

properties

callAPI.credentials

省略、同源或包含之一。 必须是一个字符串。

callAPI.headers

必须是一个对象。 指定的请求标头。

callAPI.query

它将作为查询附加到 url。

callAPI.data

数据应该发送到服务器。 如果它是一个 get 方法，它将作为查询附加到 url。

callAPI.method

请求方法，应该是一个有效的方法。

callAPI.isSuccess

检查请求是否成功。

resultPayload 将被传递到函数中。

如果结果成功，则返回 true 或 false 到标识。

注意： 它将覆盖全局 options.isSuccess

callAPI.success

此函数将在请求成功完成后调用。

结果有效负载将传递到函数中。

注意： 它将覆盖全局 options.success

callAPI.failure

此函数将在请求失败后调用。

结果有效负载将传递到函数中。

注意：它将覆盖全局 options.failure

#

Lifecycle

api 请求具有以下状态：初始、请求、成功、失败。

redux-api 将调度这些操作。

一旦调用 api 操作被调度，就会返回一个承诺。

request action:

{
  type: requestType,
  payload: callAPI.data || {},
  meta: callAPI.meta || {}
}

success action

{
  type: successType,
  payload: parsedResponseData,
  meta: callAPI.meta || {},
}

failure action

{
  type: failureType,
  payload: errorInstance,
  meta: callAPI.meta,
  error: true,
}

注意：有效载荷是一个错误实例。 http 状态代码将被发现为 error.status。 从服务器响应的错误消息将被发现为 error.data。 完整的响应将作为 error.response 找到。

TODO

• add tests for new features