react-tagged-state
v2.1.0
Published
⚛️ Experimental reactive and atomic state manager
Downloads
401
Maintainers
Readme
React Tagged State
⚛️ Global atomic state manager
React Tagged State uses signals API as SolidJS and S.js but without automatic deps tracking.
Basic Usage
import {
createSignal,
useSelector,
} from 'react-tagged-state';
// create a signal
const counter = createSignal(0);
const Counter = () => {
// read value
const count = useSelector(counter);
return (
<button
onClick={() => {
// update value
counter((value) => value + 1)
}}
>
{count}
</button>
);
};
API Overview
Signal
Signal is a value container. And also is just a function. You can read value by calling signal without arguments and write value by calling signal with next value. Simple.
import { createSignal } from 'react-tagged-state';
// create a signal
const counter = createSignal(0);
// read
const value = counter();
// write with value
counter(10);
// write with function
counter((count) => count + 1);
Event
Event is a "write-only" signal. You can't read value, but you can dispatch next value.
import { createEvent } from 'react-tagged-state';
// create an event
const reset = createEvent();
// dispatch
reset();
React & Hooks
useSelector
bind signals with component. This is all what you need to sync signals with yuor components. You can use signals or selectors like you do in redux, of course.
Signal:
import {
createSignal,
useSelector,
} from 'react-tagged-state';
const counter = createSignal(0);
const Counter = () => {
const count = useSelector(counter);
return (
<button
onClick={() =>
counter((value) => value + 1)
}
>
{count}
</button>
);
};
Component will be re-rendered on signal's value change.
Selector:
import {
createSignal,
useSelector,
} from 'react-tagged-state';
const items = createSignal<
Partial<
Record<string, { id: string; title: string }>
>
>({ id: { id: '0', title: 'title' } });
const Item = ({ itemId }: { itemId: string }) => {
const item = useSelector(() => items()[itemId]);
if (!item) {
return null;
}
return <div>{item.title}</div>;
};
Component will be re-rendered on selected value change.
Signal's Selector:
import {
createSignal,
useSelector,
} from 'react-tagged-state';
const items = createSignal<
Partial<
Record<string, { id: string; title: string }>
>
>({ id: { id: '0', title: 'title' } });
const Item = ({ itemId }: { itemId: string }) => {
const item = useSelector(items, () => items[itemId]);
if (!item) {
return null;
}
return <div>{item.title}</div>;
};
Component will be re-rendered on selected value change. This variant subscribes only to provided signal's changes. You should prefer this way if selector read value from single signal.
Subscription
Signals and events have on
method. You can use this method to subscribe to signals and events outside your components or in useEffect
.
import {
createSignal,
subscribe,
} from 'react-tagged-state';
const counter = createSignal(0);
const unsubscribe = counter.on(
(value) => {
console.log(value);
},
);
Callback will be called on signal's value change or event's dispatch.
Example
Open CodeSandbox
Performance
See results on js-framework-benchmark.