Tarjima qoshish uchun havola boyicha o'tib Pull Request oching (havolaga o'tish).
Standart til uchun tarkibni ko'rsatadi.
import { useUnit } from "effector-react";
useUnit
introduced in effector-react 22.1.0
React hook, which takes any unit or shape of units.
In the case of stores, it subscribes the component to the provided store and returns its current value, so when the store updates, the component will update automatically.
In the case of events/effects – it binds to the current scope to use in DOM event handlers. Only the effector-react/scope
version works this way; the useUnit
of effector-react
is no-op for events and does not require a Provider
with scope.
Methods
useUnit(unit)
Creates function that calls original unit but bounded to Scope
if provided.
Formulae
useUnit(event: EventCallable<T>): (payload: T) => T;
useUnit(effect: Effect<Params, Done, any>): (payload: Params) => Promise<Done>;
Arguments
unit
(EventCallable<T>
orEffect<Params, Done, Fail>
): Event or effect which will be bound to the currentscope
.
Returns
(Function): Function to pass to event handlers. Will trigger the given unit in the current scope.
Examples
Basic
import { createEvent, createStore, fork } from "effector";
import { useUnit, Provider } from "effector-react";
import { render } from "react-dom";
const incrementClicked = createEvent();
const $count = createStore(0);
$count.on(incrementClicked, (count) => count + 1);
const App = () => {
const [count, onIncrement] = useUnit([$count, incrementClicked]);
return (
<>
<p>Count: {count}</p>
<button onClick={() => onIncrement()}>increment</button>
</>
);
};
const scope = fork();
render(
() => (
<Provider value={scope}>
<App />
</Provider>
),
document.getElementById("root"),
);
useUnit($store)
Reads value from the $store
and rerenders component when $store
updates in Scope
if provided.
Formulae
useUnit($store: Store<T>): T;
Arguments
$store
: effector (Store)
Returns
Current value of the store.
Examples
Basic
import { createStore, createApi } from "effector";
import { useUnit } from "effector-react";
const $counter = createStore(0);
const { incrementClicked, decrementClicked } = createApi($counter, {
incrementClicked: (count) => count + 1,
decrementClicked: (count) => count - 1,
});
const App = () => {
const counter = useUnit($counter);
const [onIncrement, onDecrement] = useUnit([incrementClicked, decrementClicked]);
return (
<div>
{counter}
<button onClick={onIncrement}>Increment</button>
<button onClick={onDecrement}>Decrement</button>
</div>
);
};
useUnit(shape)
Formulae
useUnit({ a: Store<A>, b: Event<B>, ... }): { a: A, b: (payload: B) => B; ... }
useUnit([Store<A>, Event<B>, ... ]): [A, (payload: B) => B, ... ]
Arguments
shape
: Object or array of (EventCallable
,Effect
, orStore
)
Returns
(Object
or Array
):
- If passed
EventCallable
orEffect
: Functions with the same names or keys as the argument to pass to event handlers. Will trigger the given unit in the current scope.
Note: events or effects will be bound toScope
only if component wrapped intoProvider
. - If passed
Store
: The current value of the store.
Examples
Basic
import { createStore, createEvent, fork } from "effector";
import { useUnit, Provider } from "effector-react";
const incremented = createEvent();
const decremented = createEvent();
const $count = createStore(0);
$count.on(incremented, (count) => count + 1);
$count.on(decremented, (count) => count - 1);
const App = () => {
const count = useUnit($count);
const on = useUnit({ incremented, decremented });
// or
const [a, b] = useUnit([incremented, decremented]);
return (
<>
<p>Count: {count}</p>
<button onClick={() => on.incremented()}>increment</button>
<button onClick={() => on.decremented()}>decrement</button>
</>
);
};
const scope = fork();
render(
() => (
<Provider value={scope}>
<App />
</Provider>
),
document.getElementById("root"),
);
Ingliz tilidagi hujjatlar eng dolzarb hisoblanadi, chunki u effector guruhi tomonidan yozilgan va yangilanadi. Hujjatlarni boshqa tillarga tarjima qilish jamiyat tomonidan kuch va istaklar mavjud bo'lganda amalga oshiriladi.
Esda tutingki, tarjima qilingan maqolalar yangilanmasligi mumkin, shuning uchun eng aniq va dolzarb ma'lumot uchun hujjatlarning asl inglizcha versiyasidan foydalanishni tavsiya etamiz.