createEffect

import { createEffect } from "effector";


const effectFx = createEffect();

Метод для создания эффектов. Возвращает новый эффект.

Способы создания эффектов

Метод createEffect поддерживает несколько способов создания эффектов:

  1. С обработчиком - это самый простой способ.
  2. С конфигурацией.
  3. А также без обработчика, его можно будет задать позже с помощью метода .use(handler).

С обработчиком

  • Тип
createEffect<Params, Done, Fail = Error>(
  handler: (params: Params) => Done | Promise<Done>,
): Effect<Params, Done, Fail>
  • Пример
import { createEffect } from "effector";


const fetchUserReposFx = createEffect(async ({ name }) => {
  const url = `https://api.github.com/users/${name}/repos`;
  const req = await fetch(url);
  return req.json();
});


fetchUserReposFx.done.watch(({ params, result }) => {
  console.log(result);
});


await fetchUserReposFx({ name: "zerobias" });

С конфигурацией

Поле name используется для улучшения сообщений об ошибках и отладки.

  • Тип
export function createEffect<Params, Done, Fail = Error>(config: {
  name?: string;
  handler?: (params: Params) => Promise<Done> | Done;
}): Effect<Params, Done, Fail>;
  • Пример
import { createEffect } from "effector";


const fetchUserReposFx = createEffect({
  name: "fetch user repositories",
  async handler({ name }) {
    const url = `https://api.github.com/users/${name}/repos`;
    const req = await fetch(url);
    return req.json();
  },
});


await fetchUserReposFx({ name: "zerobias" });

Без обработчика

Чаще всего используется для тестов. Более подробная информация.

use - это антипаттерн

Старайтесь не использовать .use(), так как это является антипаттерном и ухудшает вывод типов.

  • Пример
import { createEffect } from "effector";


const fetchUserReposFx = createEffect();


fetchUserReposFx.use(async ({ name }) => {
  const url = `https://api.github.com/users/${name}/repos`;
  const req = await fetch(url);
  return req.json();
});


await fetchUserReposFx({ name: "zerobias" });

Примеры

  • Изменение состояния по завершению эффекта:
import { createStore, createEffect } from "effector";


interface Repo {
  // ...
}


const $repos = createStore<Repo[]>([]);


const fetchUserReposFx = createEffect(async (name: string) => {
  const url = `https://api.github.com/users/${name}/repos`;
  const req = await fetch(url);
  return req.json();
});


$repos.on(fetchUserReposFx.doneData, (_, repos) => repos);


$repos.watch((repos) => {
  console.log(`${repos.length} repos`);
});
// => 0 репозиториев


await fetchUserReposFx("zerobias");
// => 26 репозиториев

Запустить пример

  • Наблюдение за состоянием эффекта:
import { createEffect } from "effector";


const fetchUserReposFx = createEffect(async ({ name }) => {
  const url = `https://api.github.com/users/${name}/repos`;
  const req = await fetch(url);
  return req.json();
});


fetchUserReposFx.pending.watch((pending) => {
  console.log(`effect is pending?: ${pending ? "yes" : "no"}`);
});


fetchUserReposFx.done.watch(({ params, result }) => {
  console.log(params); // {name: 'zerobias'}
  console.log(result); // разрешенное значение, результат
});


fetchUserReposFx.fail.watch(({ params, error }) => {
  console.error(params); // {name: 'zerobias'}
  console.error(error); //  отклоненное значение, ошибка
});


fetchUserReposFx.finally.watch(({ params, status, result, error }) => {
  console.log(params); // {name: 'zerobias'}
  console.log(`handler status: ${status}`);


  if (error) {
    console.log("handler rejected", error);
  } else {
    console.log("handler resolved", result);
  }
});


await fetchUserReposFx({ name: "zerobias" });

Запустить пример

Основные ошибки

Ниже приведен список возможных ошибок, с которыми вы можете столкнуться при работе с эффектами:

Перевод поддерживается сообществом

Документация на английском языке - самая актуальная, поскольку её пишет и обновляет команда effector. Перевод документации на другие языки осуществляется сообществом по мере наличия сил и желания.

Помните, что переведенные статьи могут быть неактуальными, поэтому для получения наиболее точной и актуальной информации рекомендуем использовать оригинальную англоязычную версию документации.

Соавторы
Commits