pending

import { pending } from 'patronum';
// or
import { pending } from 'patronum/pending';

`pendings(effects)`

Motivation

This overload allows to read pending state of passed effects. It is useful when you want to show loading state of the whole application.

Formulae

$inProcess = pending([fx1, fx2]);

When some of effects are in pending state, result will be true

Arguments

effects (Array<Effect<any, any, any>>) - array of any effects

Returns

$inProcess (Store<boolean>) - Store with boolean state

Example

import { createEffect } from 'effector';
import { pending } from 'patronum/pending';

const loadFirstFx = createEffect(() => Promise.resolve(null));
const loadSecondFx = createEffect(() => Promise.resolve(2));
const $processing = pending([loadFirstFx, loadSecondFx]);

$processing.watch((processing) => console.info(`processing: ${processing}`));
// => processing: false

loadFirstFx();
loadSecondFx();
// => processing: true

`pending({ effects: [] })`

Motivation

This overload receives effects and optional of strategy as an object. Useful when need to change strategy

Formulae

$inProcess = pending({ effects: [fx1, fx2], of: Strategy });

When effects pending state, result will be true
The of parameter selects strategy

Arguments

effects (Array<Effect<any, any, any>>) - array of any effects
of ("some" | "every") — Optional. Select strategy of combining pendings of different effects. Default "some"

Returns

$inProcess (Store<boolean>) - Store with boolean state

Example: show processing only when all effects are pending

import { createEffect } from 'effector';
import { pending } from 'patronum/pending';

const loadFirstFx = createEffect(() => Promise.resolve(null));
const loadSecondFx = createEffect(() => Promise.resolve(2));
const $processing = pending({
  effects: [loadFirstFx, loadSecondFx],
  of: 'every',
});

$processing.watch((processing) => console.info(`processing: ${processing}`));
// => processing: false

loadFirstFx();
// => processing is still false
loadSecondFx();
// => processing: true

`pending({ domain })`

Motivation

This overload allows to read pending state of created effects in the domain. It is useful when you want to show loading state of the whole application.

Formulae

$inProcess = pending({ domain, of: Strategy });

When an effect created in the domain in pending state, result will be true
The of parameter selects strategy

Arguments

domain (Domain) - Effector domain with at least one effect
of ("some" | "every") — Optional. Select strategy of combining pendings of different effects. Default "some"

Returns

$inProcess (Store<boolean>) - Store with boolean state

Example

import { createDomain } from 'effector';
import { pending } from 'patronum/pending';

const app = createDomain();
const loadFirstFx = app.createEffect(() => Promise.resolve(null));
const loadSecondFx = app.createEffect(() => Promise.resolve(2));
const $processing = pending({ domain: app });

$processing.watch((processing) => console.info(`processing: ${processing}`));
// => processing: false

loadFirstFx();
loadSecondFx();
// => processing: true

Strategy

There available two options:

some — default strategy when of parameter is not provided. At least one effect must be in pending state.
every — each effect must be in pending state.

Example

import { createEffect } from 'effector';
import { pending } from 'patronum/pending';

const loadFirstFx = createEffect(() => Promise.resolve(null));
const loadSecondFx = createEffect(() => Promise.resolve(2));

const $pending = pending({ effects: [loadFirstFx, loadSecondFx], of: 'every' });

// When no effects is loading, $pending will be true

// If only one is loading, also will be false
loadFirstFx();

// But after running the second effect, $pending will be true
loadSecondFx();

$pending.watch(console.log); // true