Чтобы добавить перевод, откройте Pull Request по этой ссылке.
Отображается содержимое для языка по умолчанию.
import { useUnit } from "effector-solid";
Binds effector stores to the Solid reactivity system or, in the case of events/effects – binds to current scope to use in dom event handlers.
Only effector-solid/scope
version works this way, useUnit
of effector-solid
is no-op for events and does not require Provider
with scope.
Methods
useUnit(unit)
Arguments
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 currentscope
.
Returns
(Function
): Function to pass to event handlers. Will trigger the given unit in the current scope.
Example
A basic Solid component using useUnit
with events and stores.
import { render } from "solid-js/web";import { createEvent, createStore, fork } from "effector";import { useUnit, Provider } from "effector-solid";
const incremented = createEvent();const $count = createStore(0);
$count.on(incremented, (count) => count + 1);
const App = () => { const [count, handleIncrement] = useUnit([$count, incremented]);
return ( <> <p>Count: {count()}</p> <button onClick={() => handleIncrement()}>Increment</button> </> );};
const scope = fork();
render( () => ( <Provider value={scope}> <App /> </Provider> ), document.getElementById("root"),);
useUnit(store)
Formulae
useUnit($store: Store<State>): Accessor<State>;
Arguments
$store
effector (Store).
Returns
(Accessor<State>
) which will subscribe to store state.
Example
import { createStore, createApi } from "effector";import { useUnit } from "effector-solid";
const $counter = createStore(0);
const { incremented, decremented } = createApi($counter, { incremented: (count) => count + 1, decremented: (count) => count - 1,});
const App = () => { const counter = useUnit($counter); const [handleIncrement, handleDecrement] = useUnit([incremented, decremented]);
return ( <div> {counter()} <button onClick={incremented}>Increment</button> <button onClick={decremented}>Decrement</button> </div> );};
useUnit(shape)
Formulae
useUnit({ a: Store<A>, b: Event<B>, ... }): { a: Accessor<A>, b: (payload: B) => B; ... }
useUnit([Store<A>, Event<B>, ... ]): [Accessor<A>, (payload: B) => B, ... ]
Arguments
shape
Object or array of (EventCallable
,Effect
, orStore
): Events, or effects, or stores as accessors which will be bound to the currentscope
.
Returns
(Object
or Array
):
- If
EventCallable
orEffect
: functions with the same names or keys as argument to pass to event handlers. Will trigger given unit in current scope Note: events or effects will be bound only ifuseUnit
is imported fromeffector-solid/scope
. - If
Store
: accessor signals which will subscribe to the store state.
Examples
import { render } from "solid-js/web";import { createStore, createEvent, fork } from "effector";import { useUnit, Provider } from "effector-solid/scope";
const incremented = createEvent();const decremented = createEvent();
const $count = createStore(0) .on(incremented, (count) => count + 1) .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"),);
Документация на английском языке - самая актуальная, поскольку её пишет и обновляет команда effector. Перевод документации на другие языки осуществляется сообществом по мере наличия сил и желания.
Помните, что переведенные статьи могут быть неактуальными, поэтому для получения наиболее точной и актуальной информации рекомендуем использовать оригинальную англоязычную версию документации.