@36node/redux-api 中文文档教程

Question

redux-api

Redux-api 是一个可以轻松编写客户端与后端通信的库。 它生成用于对 API 端点进行 ajax 调用的操作和选择器。 此外，它使用 saga 来更改 ajax 状态并将结果保存在 redux 存储中，配置很少。

Use

Config reducer

Redux-api 提供了两个reducer：Api reducer 和Entities reducer；

Api reducer 存储 api 状态：结果、加载、请求 Normalizr 的 Entities reducer 存储实体

// reducer.js
import { combineReducers } from "redux";

import entities from "./entity";
import { apiReducers } from "@36node/redux-api";

/**
 * apiReducers: {api: apiReducer, entities: entitiesReducer}
 * */
export default combineReducers({
  ...apiReducers,
});

Config saga

// saga.js
import { fork, all } from "redux-saga/effects";
import { watchApis } from "@36node/redux-api";

export default function* root() {
  yield all([fork(watchApis)]);
}

Write an endpoint function of an api

import fetch from "@36node/fetch";

// endpoint function param is request action payload
function listPetsEndpoint(req) {
  const { query, headers } = req;

  // also can user other ajax tools, should return a promise
  return fetch(`${some_url}/pets`, {
    method: "get",
    query,
    headers,
  });
}

Register api in actions

// actions.js
import { createApiAction } from "@36node/redux-api";

export const listPets = createApiActions("LIST_PETS", {
  // schema for normalizr
  schema: [petSchema],
  endpoint: listPetsEndpoint,
});

Dispatch action

import {listPets} from 'actions'

...

fetchPets = () => {
  // dispatch a request action
  this.props.dispatch(listPets.request({query: {limit: 10, offset: 0}}));
}

refreshPets = () => {
  // refresh action means repeat last request action
  this.props.dispatch(listPets.refresh());
}

clearPets = () => {
  // clear action means clear api state in store
  this.props.dispatch(listPets.clear());
}
...

Select api state

import React from "react";
import { connect } from "redux-react";
import { apiSelector } from "@36node/redux-api";

@connect(state => {
  const listPetsState = apiSelector("LIST_PETS")(state);

  return {
    loading: listPetsState.loading,
    pets: listPetsState.result || [],
  };
})
class SomeContainer extends React.Component {}