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"),
);