React binding for @fp51/store
npm install @fp51/store-react@fp51/store-react
====================
This the React binding library for @fp51/store, a lightweight Javascript
store library.
``
npm add react @fp51/store @fp51/store-react
react and @fp51/store are peer dependencies
It's easy to use @fp51/store with React thanks to hooks exposed by@fp51/store-react.
Hook to get store's state. Will subscribe to change and cause rerender.
`
useState
Params
- store: Store - The store
- options: Options - Optional. See Options below.
Returns
State - The full store state
Example
`typescript
const store = Store.create(() => 2)();
function Component() {
const state = useState(store);
return
{state}
; // Will return2
Use
to create a useState hook specific to a store.`
createStateHook(getStore: () => Store): (options?: Options) => State
Params
-
- A function returning the store.-
options: Options - Optional. See Options below.Returns
State - The full store stateExample
`typescript
const store = Store.create(() => 2)(); const useState = createStateHook(() => store);
function Component() {
const state = useState();
return
{state}
; // Will return 2
}
`Hook to get store's state and apply a selector on it. Will subscribe to change
and cause rerender.
useSelector(
selector: (state: State) => SubState,
store: Store,
options: Options = {},
): SubState
Params
-
- Selector over state.-
store: Store - The store.-
options: Options - Optional. See Options below.Returns
SubState - The result of selector over state Example
`typescript
const store = Store.create(() => ({ value: 2 }))();function Component() {
const subState = useSelector(({ value }) => value, store);
return
{subState}
// Will return 2
}
`Use
to create a useSelector hook specific to a store.`
createSelectorHook(getStore: () => Store): (
selector: (state: State) => SubState,
options?: Options,
): State
Params
-
- A function returning the store.-
selector: (state: State) => SubState - Selector over state.-
options: Options - Optional. See Options below.Returns
State - The full store stateExample
`typescript
const store = Store.create(() => ({ value: 2 }))();const useSelector = createSelectorHook(store);
function Component() {
const subState = useSelector(({ value }) => value);
return
{subState}
; // Will return 2
}
`typescript
type Options = Partial<{
equals: (currentState: State, nextState: State) => boolean;
}>;
`When the stores change,
and useState hooks only force a
re-render if the hook result is different than the last result.You can provide your own
equals function that should return true if
currentState is the same as nextState. Default is strict equality (===).Providing a shallow equality function is a common pattern when the
useSelector or useState hooks return a new object object every time, like in
this example:`typescript
import { shallowEqual } from 'somelib';type Todo = {
done: boolean;
label: string;
};
type State = Todo[];
const store: Store = ...;
function pendingDoneSelector(state: state) { // returns a new object every time
return {
pending: state.filter(({ done }) => !done),
done: state.filter(({ done }) => done),
};
}
function Component() {
// with the shallowEqual function, the selector will not force a re-render
// when pendingDoneSelector returned object content doesn't change, even if
// it's not strictly the same reference
const state = useSelector(pendingDoneSelector, store, { equals: shallowEqual });
return ...
}
``