Установка

С помощью пакетного менеджера

Effector не требует использования какого-то одного пакетного менеджера, можете использовать любой на свой выбор.
Например: yarn, pnpm.

npm add effector

React

npm add effector effector-react

Вы можете начать использовать effector онлайн с помощью шаблона Stackblitz внутри которого уже настроен TypeScript, ViteJS и React.

Vue

npm add effector effector-vue

Solid

npm add effector effector-solid

Svelte

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

Online playground

Все примеры в этой документации запускаются в нашей онлайн песочнице. Она позволяет запускать, тестировать и распространять свои идеи бесплатно и без установки. React и синтаксис TypeScript поддерживаются без дополнительной настройки. Репозиторий проекта.

Deno

Чтобы использовать effector, просто импортируйте effector.mjs из любого CDN.

import { createStore } from "https://cdn.jsdelivr.net/npm/effector/effector.mjs";

Примеры CDN:

• https://www.jsdelivr.com/package/npm/effector
• https://cdn.jsdelivr.net/npm/effector/effector.cjs.js
• https://cdn.jsdelivr.net/npm/effector/effector.mjs
• https://cdn.jsdelivr.net/npm/effector-react/effector-react.cjs.js
• https://cdn.jsdelivr.net/npm/effector-vue/effector-vue.cjs.js

DevTools

Используйте effector-logger для вывода изменений сторов в консоль, вывода их значений в браузерный интерфейс и подключения к Redux Dev Tools.

Для рендеринга на сервере и написания тестов вам понадобятся плагины для компилятора:

Babel

Плагин для Babel включен в поставку основного пакета effector и не требует установки.

Читайте детали по ссылке.

SWC

npm add --development @effector/swc-plugin @swc/core

Документация плагина.

Совместимость

Для совместимости с устаревшими версиями браузеров до IE11 и Chrome 47 (версия браузера для Smart TV) используйте импорты из файлов: effector/compat, effector-react/compat и effector-vue/compat.

Вы можете заменить импорты вручную:

- import {createStore} from 'effector'
+ import {createStore} from 'effector/compat'

А также используя плагин babel-plugin-module-resolver. Примерная конфигурация в .babelrc:

{
  "plugins": [
    [
      "babel-plugin-module-resolver",
      {
        "alias": {
          "^effector$": "effector/compat",
          "^effector-react$": "effector-react/compat"
        }
      }
    ]
  ]
}

Polyfills

Effector использует некоторые глобальные объекты, в старых версиях браузеров их может не быть, поэтому вам может понадобиться установить их самостоятельно, если вы собираетесь поддерживать такие браузеры.

Вам может понадобиться установить следующие полифиллы:

• Promise
• Object.assign
• Array.prototype.flat