---
sidebar_position: 7
title: handleEffect
---
# handleEffect

import ReduckTip from "@site-docs-en/components/reduck-tip"

<ReduckTip />

An asynchronous function type Effect usually has three states that need to be processed: in request, request successful, and request failed. The way to handle these states is to write the Action functions (pending, fulfilled, rejected).

With the help of the `handleEffect` API, we can generate default Action functions to handle different results at each stage of an asynchronous request. The structure of the State returned by the Action generated by `handleEffect` is as follows:

```ts
interface State {
  result: any; // result of fulfilled state
  pending: boolean; // request is pending
  error: string; // request error message
}
```

## Function Signature

```ts
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;
```

### Input

- `ns`: the default returned State structure is flat, By setting this parameter, the returned State can be mounted under the field named by the `ns`. For example, if `ns` is set to `"data"`, the returned structure is:

```ts
interface State {
  data: {
    pending: boolean;
    result: any;
    error: string;
  };
}
```

- `result`: the default value is "result". This parameter corresponds to the field name that stores the fulfilled state results. For example, set `result` to `"items"`, the returned State structure is:

```ts
interface State {
  items: any; // Default result -> items
  pending: boolean;
  error: string;
}
```

if `result` is `false`, then returned State has no `result`:

```ts
interface State {
  pending: boolean;
  error: string;
}
```

- `pending`: the default value is `"pending"`. Change the name of the `pending` field in the returned State. Usage is the same as `result`.

- `error`: the default value is `"error"`. Change the name of the `error` field in the returned State. Usage is the same as `result`.

- `combineMode`: the default value is `"merge"`. Get fulfilled state results. There are two ways to deal with it (The data types that can be automatically processed here are also limited to simple object or array types):

  - `"merge"`: the previous data is merged with the current data. the data is an array type, operation is similar to `[].concat(lastData, currentData)`. the data is an object, operation is similar to `{...lastData, ...curData}`.
  - `"replace"`: the current data directly replaces the previous data.

- `omitResultNamespace`: the default value is `false`. When the result is an object type, you want to mount the result directly on the State of the Model, rather than on "result", you can set it to true. For example:

```ts
// the result: {user: 'xx', email: 'xx'},
// config handleEffect({ omitResultNamespace: true })
// get State like follows:
{
  user: 'xx',
  email: 'xx',
  pending: false,
  error: null,
}
```

### Return Type

Objects are processed by actions in pending, fulfilled, and rejected states.

:::info More
[Manage Effect](/guides/topic-detail/model/manage-effects).

:::
