定义Request Action

请求Action本质也是一个action，唯一区别就是它是异步的。

  1. import { Model } from '@redux-model/web';
  2. import { $api } from './ApiService';
  3.  
  4. interface Response {
  5.     id: number;
  6.     name: string;
  7. }
  8.  
  9. type Data = Partial<Response>;
  10.  
  11. class ThirdModel extends Model<Data> {
  12.     getProfile = $api.get((userId: number) => {
  13.         return this
  14.             .uri<Response>('/profile')
  15.             .query({
  16.                 userId,
  17.             })
  18.             // 请求成功时，变更reducer
  19.             .onSuccess((state, action) => {
  20.                 return action.response;
  21.             })
  22.     });
  23.  
  24.     protected initReducer(): Data {
  25.         return {};
  26.     }
  27. }
  28.  
  29. export const thirdModel = new ThirdModel();

我们定义了一个名为getProfile的请求Action，并在请求成功时，把获取到的数据直接作为reducer的新数据。

  1. console.log(thirdModel.data.id)   // id === undefined
  2. console.log(thirdModel.data.name) // name === undefined
  3.  
  4. await thirdModel.getProfile(2);   // 假设请求成功
  5.  
  6. console.log(thirdModel.data.id)   // id === 2
  7. console.log(thirdModel.data.name) // name === 'peter'

Reducer事件

并不是只有请求成功才能变更reducer，你也可以选择在请求之前和请求失败的时候更改Reducer

  1. getProfile = $api.get(() => {
  2.     return this
  3.         .uri(...)
  4.  
  5.         // 当准备请求
  6.         .onPrepare((state, action) => {
  7.              state.id = 0;
  8.              state.name = 'unknown';
  9.         })
  10.  
  11.         // 当请求成功
  12.         .onSuccess((state, action) => {
  13.              return action.response;
  14.         })
  15.  
  16.         // 请求失败
  17.         .onFail((state, action) => {
  18.             return {};
  19.         })
  20. });

Promise

Request Action支持正常的promise事件，你可以在组件中轻松拿到最新的数据而无需通过react-redux.connect()或者hooks.useData()

  1. thirdModel.getProfile(2).then(({ response }) => {
  2.     console.log(response.id) // id === 2
  3. });

终止请求

有时候，当前的请求已经没有意义，你想立即取消这次请求。你可以这么做：

  1. const promise = thirdModel.getProfile(2);
  2.  
  3. promise.cancel(); // 取消成功