Skip to main content

pending

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

pending({ effects: [] })​

Motivation​

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

Formulae​

$inProcess = pending({ effects: [fx1, fx2], of: Strategy });
  • When effects pending state, result will be true
  • The of parameter selects strategy

Arguments​

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

The of argument was added since patronum 1.1.0

Returns​

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

Example​

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

const loadFirst = createEffect(() => Promise.resolve(null));
const loadSecond = createEffect(() => Promise.resolve(2));
const $processing = pending({ effects: [loadFirst, loadSecond] });

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

loadFirst();
loadSecond();
// => processing: true

pending({ domain })​

since

patronum 1.1.0

Motivation​

This overload allows to read pending state of created effects in the domain. It is usef 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​

  1. domain (Domain) - Effector domain with at least one effect
  2. of ("some" | "every") — Optional. Select strategy of combining pendings of differents 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 loadFirst = app.createEffect(() => Promise.resolve(null));
const loadSecond = app.createEffect(() => Promise.resolve(2));
const $processing = pending({ domain: app });

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

loadFirst();
loadSecond();
// => 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 loadFirst = createEffect(() => Promise.resolve(null));
const loadSecond = createEffect(() => Promise.resolve(2));

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

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

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

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

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