跳转到主文档
应用工程
模块工程
Monorepo工程
项目生成器

handleEffect

补充信息

默认情况下,本节所有 API 的导出包名为:@modern-js/runtime/model

如果是在 Modern.js 以外单独集成 Reduck,导出包名为:@modern-js-reduck/react

一个异步函数类型的 Effect,通常有三种需要处理的状态: 1.请求中;2.请求成功;3.请求处理失败。这些状态处理的方式,就是编写对应的 Action 函数(pending、fulfilled、rejected)。

借助 handleEffect API,我们可以生成默认的 Action 函数来处理异步请求各个阶段的不同结果。handleEffect 生成的 Action 返回的 State 的结构如下:

interface State {
result: any; // 存储 fulfilled 状态的返回结果
pending: boolean; // 请求是否结束
error: string; // 请求失败的结果
}

类型

interface EffectActions {
pending: Action;
fulfilled: Action;
rejected: Action;
}

interface Config {
ns?: string;
result?: string | false;
error?: string | false;
pending?: string | false;
combineMode?: 'merge' | 'replace';
omitResultNamespace?: boolean;
}

function handleEffect(config: Config): EffectActions;

参数

  • ns:默认返回的 State 结构扁平地挂载到 Model 的 State 上,通过设置该参数可以将返回的 State 挂载到 ns 值命名的字段下。例如,ns 设置为 data,返回的 State 结构为:
interface State {
data: {
pending: boolean;
result: any;
error: string;
}
}
  • result:默认值为 "result"。该参数对应存储异步请求 fulfilled 状态结果的字段名称。例如,设置 result"items",返回的 State 结构为:
interface State {
items: any; // 默认的 result -> items
pending: boolean;
error: string;
}

resultfalse,返回的 State 结构中不存在 result

interface State {
pending: boolean;
error: string;
}
  • pending:默认值为 "pending"。改变返回 State 中的 pending 字段名。用法同上。

  • error: 默认值为 "error"。改变返回 State 中的 error 字段名。用法同上。

  • combineMode:默认值为 "merge"。获取 fulfilled 状态的返回数据后,对 result 的处理方式:merge(合并)和replace(替换)。这里能自动处理的数据类型也仅限为简单的对象或者数组类型。

    • merge:前一次的数据与当前的数据合并。数据为数组类型,内部操作类似于 [].concat(lastData, currentData);数据为对象类型,内部操作类似于 {...lastData, ...curData}
    • replace:当前的数据直接替换之前的数据。
  • omitResultNamespace:默认值为 "false"。当异步请求的结果为对象类型,希望把该结果直接挂载到 Model 的 State 上,而不是挂载到 "result" 上,可以设置为 true。例如:

// 一个异步请求得到的数据为一个对象:{user: 'xx', email: 'xx'},
// 配置 handleEffect({ omitResultNamespace: true })
// 则得到的 State 结构如下:
{
user: 'xx',
email: 'xx',
pending: false,
error: null,
}

返回值

分别处理 pending、fulfilled、rejected 三种状态的 Action 组成的对象。

更多参考