Быстрый старт

Effector - это мощный менеджер состояния, который предлагает принципиально новый подход к управлению данными в приложениях, который также. В отличие от традиционных решений, где состояние изменяется напрямую через действия, Effector использует реактивный и декларативный подход.

Особенности Effector

  • Effector реактивный 🚀: Effector автоматически отслеживает зависимости и обновляет все связанные части приложения, избавляя вас от необходимости вручную управлять обновлениями.
  • Декларативный код 📝: Вы описываете связи между данными и их трансформации, а Effector сам заботится о том, как и когда выполнять эти преобразования.
  • Предсказуемое тестирование ✅: Изолированные контексты делают тестирование бизнес-логики простым и надёжным.
  • Гибкая архитектура 🏗️: Effector одинаково хорошо подходит как для небольших приложений, так и для крупных корпоративных систем.
  • Универсальность 🔄: Хотя Effector прекрасно интегрируется с популярными фреймворками, он может использоваться в любой JavaScript-среде.

Больше о ключевых особенностях эффектора вы можете прочитать здесь

Установка effector

Для начала установим effector при помощи вашего любимого пакетного менеджера

npm install effector

Создаем ваш первый стор

Теперь давайте создадим хранилище, которое является состоянием вашего приложения.

import { createStore } from "effector";

const $counter = createStore(0);

Добавление событий

Дальше давайте добавим события, при вызове которых, мы будем обновлять данные хранилища.

import { createEvent } from "effector";

const incremented = createEvent();
const decremented = createEvent();

Подписываем стор на событие

И свяжем событие вместе с хранилищем.

// counter.js
import { createEvent, createStore } from "effector";

const $counter = createStore(0);

const incremented = createEvent();
const decremented = createEvent();

$counter.on(incremented, (counter) => counter + 1);
$counter.on(decremented, (counter) => counter - 1);

// и вызовите событие в вашем приложении
incremented();
// counter увеличиться на 1
decremented();
// counter уменьшится на -1
decremented();
// counter уменьшится на -1

Интеграция с фреймворками

Установка

Если вы хотите использовать effector вместе с фреймворком, то для этого вам потребуется установить дополнительный пакет:

npm install effector effector-react

Примеры использования

И использовать

import { useUnit } from "effector-react";
import { createEvent, createStore } from "effector";
import { $counter, incremented, decremented } from "./counter.js";

export const Counter = () => {
  const [counter, onIncremented, onDecremented] = useUnit([$counter, incremented, decremented]);
  // или
  const { counter, onIncremented, onDecremented } = useUnit({ $counter, incremented, decremented });
  // или
  const counter = useUnit($counter);
  const onIncremented = useUnit(incremented);
  const onDecremented = useUnit(decremented);

  return (
    <div>
      <h1>Count: {counter}</h1>
      <button onClick={onIncremented}>Increment</button>
      <button onClick={onDecremented}>Decrement</button>
    </div>
  );
};
А где Svelte ?

Для работы со Svelte не требуется дополнительные пакеты, он прекрасно работает с базовым пакетом effector.

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

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

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

Соавторы
Commits