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

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

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

React Context.Provider component, which takes any Scope in its value prop and makes all hooks in the subtree work with this scope:

  • useUnit($store) (and etc.) will read the state and subscribe to updates of the $store in this scope
  • useUnit(event) (and etc.) will bind provided event or effect to this scope

Usage

Example Usage

Here is an example of <Provider /> usage.

import { createEvent, createStore, fork } from "effector";
import { useUnit, Provider } from "effector-react";
import { render } from "react-dom";


const buttonClicked = createEvent();
const $count = createStore(0);


$count.on(buttonClicked, (counter) => counter + 1);


const App = () => {
  const [count, handleClick] = useUnit([$count, buttonClicked]);


  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => handleClick()}>increment</button>
    </>
  );
};


const myScope = fork({
  values: [[$count, 42]],
});


render(
  <Provider value={myScope}>
    <App />
  </Provider>,
  document.getElementById("root"),
);

The <App /> component is placed in the subtree of <Provider value={myScope} />, so its useUnit([$count, inc]) call will return

  • State of the $count store in the myScope
  • Version of buttonClicked event, which is bound to the myScope, which, if called, updates the $count state in the myScope

Multiple Providers Usage

There can be as many <Provider /> instances in the tree, as you may need.

import { fork } from "effector";
import { Provider } from "effector-react";
import { App } from "@/app";


const scopeA = fork();
const scopeB = fork();


const ParallelWidgets = () => (
  <>
    <Provider value={scopeA}>
      <App />
    </Provider>
    <Provider value={scopeB}>
      <App />
    </Provider>
  </>
);

Provider Properties

value

Scope: any Scope. All hooks in the subtree will work with this scope.

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

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

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

Соавторы
Commits