Simple. Small.
npm install --save whoosh-react
This example on codesandbox.io
import { createShared } from 'whoosh-react';
// `appCounter` is a Shared State that can be accessed from different components
const appCounter = createShared(0); // 0 - initial value
// Component that renders `appCounter` value
const CounterValue = () => {
const counter = appCounter.use(); // Hook returns current counter value
return <p> { counter } </p>;
};
// Component that modifies `appCounter` value
const CounterControls = () => {
// Functions update counter state
const reset = () => appCounter.set(0);
const addOne = () => appCounter.set(val => val + 1);
return (<>
<button onClick={reset} > Reset </button>
<button onClick={addOne} > Add 1 </button>
</>);
};
const RootComponent = () => (
<>
<A>
<CounterValue/>
</A>
<B>
<CounterControls/>
</B>
</>
);
This example on codesandbox.io
export const appCounter = createShared(
// Initial value
0,
// Reducer
(previousValue, { operation, arg }) => {
switch(operation) {
case 'add': return previousValue + arg;
case 'subtract': return previousValue - arg;
}
throw new Error(`Operation ${operation} is not supported!`)
}
);
// ...
const addOne = () => appCounter.set({operation: 'add', arg: 1});
<button onClick={addOne} > Add 1 </button>
- Reducer
toLocalStorage()
- saves/restores Shared State from/to thelocalStorage
. - Reducer
arrayOp
andsetOp
- adds operationsremove
,add
,filter
andmap
toArray<S>
andSet<S>
Shared State. - Reducer composition - compose two reducers into one
// S - State type
// A - Reducer input type (if Reducer is present)
// I - Initializer input type (if Reducer and Initializer are both present)
interface SharedState<S, A = S> {
use(): S; // React Hook that returns current state value
get(): S; // Getter
set(a: A | ((s: S) => A)): void; // Setter / Dispatcher
setRaw(s: S): void; // Sets state bypassing reducer
on(cb: (state: S) => void): () => void; // Subscribe on the state change, returns unsubscribe function
off(cb: (state: S) => void): void; // Unsubscribe off the state change
}
type Reducer<S, A> = (previousState: S, input: A) => S;
type ReducerAndInit<S, A, I> = [ Reducer<S, A>, (initArg: I) => S ];
type ReducerOrReducerWithInit<S, A> = Reducer<S, A> | ReducerAndInit<S, A, S>;
function createShared<S>(initValue: S, reducer?: ReducerOrReducerWithInit<S, S>): SharedState<S, S>;
function createShared<S, A>(initValue: S, reducer: ReducerOrReducerWithInit<S, A>): SharedState<S, A>;
function createShared<S, A, I>(initValue: I, reducer: ReducerAndInit<S, A, I>): SharedState<S, A>;
© github.com/AlexIII
MIT