Эта страница еще не переведена

Чтобы добавить перевод, откройте Pull Request по этой ссылке.

Отображается содержимое для языка по умолчанию.

import {} from "effector-react/scope";
Deprecated

Since effector 23.0.0 the core team recommends using main module of effector-react instead.

Provides all exports from effector-react, but enforces application to use Scope for all components.

Usage

You can use this module in the same way as effector-react, but it will require passing Scope to Provider component.

main.js
import { fork } from "effector";
import { Provider } from "effector-react/scope";
import React from "react";
import ReactDOM from "react-dom/client";
const scope = fork();
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Provider value={scope}>
<Application />
</Provider>,
);

Migration

Since effector-react/scope is deprecated, it is better to migrate to effector-react by removing scope from import path.

import { Provider } from "effector-react";
import { Provider } from "effector-react/scope";
Continues migration

effector-react and effector-react/scope do not share any code, so you have to migrate all your code to effector-react in the same time, because otherwise you will get runtime errors. These errors will be thrown because effector-react and effector-react/scope will use different instances Provider and do not have access to each other’s Provider.

If you use Babel, you need to remove parameter reactSsr from babel-plugin configuration.

{
"plugins": [
[
"effector/babel-plugin",
{
"reactSsr": true
}
]
]
}

If you use SWC, you need to remove bindings.react.scopeReplace parameter from @effector/swc-plugin configuration.

{
"$schema": "https://json.schemastore.org/swcrc",
"jsc": {
"experimental": {
"plugins": [
"@effector/swc-plugin",
{
"bindings": {
"react": {
"scopeReplace": true
}
}
}
]
}
}
}

Scope Enforcement

All modern hooks of effector-react are designed to work with Scope. If you want to imitate the behavior of effector-react/scope module, you can use the second parameter of hooks with an option forceScope: true. In this case, the hook will throw an error if the Scope is not passed to Provider.

import { useUnit } from 'effector-react/scope'
import { useUnit } from 'effector-react'
function Example() {
const { text } = useUnit({ text: $text })
const { text } = useUnit({ text: $text }, { forceScope: true })
return <p>{text}</p>
}
Перевод поддерживается сообществом

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

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

Соавторы