Contextual state management for React, ReasonReact and Preact
MIT License
Bot releases are hidden (Show)
react-scoped-model
and preact-scoped-model
useAsyncSelector
, useSuspenseSelector
and useSuspendedState
.useScopedModelExists
shouldNotify
on scoped model options.ScopedModelOptions
generic signature changed from <Props>
to <Model, Props
>ScopedModelOptions
.react-scoped-model-swr
ScopedModelOptions
mutate
, mutateSelf
and setSelf
to get
and set
methods for createGraphNode
. This allows direct mutation to other nodes and self-dispatch.set
for get
. set
is now similar to the set
interface of the set
field, which now accepts a target node and action.mutate
and trigger
functions, which accept a key.key
is now required.useOwnCache
to the options.subscription
field for get
callbacks. This is a function for managing subscription from external sources e.g. Observables, Events, etc. The function receives a callback which runs the subscription process, and may return a callback for cleanup logic.const example = createGraphNode({
get: ({ set, subscription }) => {
subscription(() => {
let count = 0;
const interval = setTimeout(() => {
count += 1;
set(count);
}, 1000);
return () => {
clearTimeout(interval);
};
});
return 0;
},
});
Published by lxsmnsyc about 4 years ago
React.memo
.import { createNullaryModel } from '@lxsmnsyc/react-scoped-model';
In comparison with a normal scoped model, the nullary scoped model cannot receive props and only has a displayName
as a model option.
createStateModel
and createReducerModel
is now a subset of createNullaryModel
.useAsyncSelector
when an unstable selector reference is given.Published by lxsmnsyc about 4 years ago
shouldUpdate
which is a function that tells the model if it should recompute based on the received props. This is similar internally to React.memo
.AnonymousScopedModel
.Published by lxsmnsyc about 4 years ago
This version overhauls the current API to a new one with additional new features.
useSelector
will be accepting the Scoped Model instance as the first parameter.createSelector(model, selector)
creates a hook based on useSelector
. This helps stabilize references specially for functions used for transform states.createStateModel
based on useState
and more.ScopedModelInterface
type and other types.Published by lxsmnsyc about 4 years ago
useValue
hook which allows consuming the whole state from the modelconst { count, increment, decrement } = Counter.useValue();
The hook also accepts an optional comparison function on comparing the captured state with the current state.
Published by lxsmnsyc about 4 years ago
useSelector
and useSelectors
with conditional re-rendering. These hooks now accepts a function as a second parameter which compares the previously transformed value with the newly transformed value, allowing when should the selector update the component. This is useful for users who wants to only update partially or strictly with a particular criteria.function selectUserInfo(userDetails) {
return {
name: userDetails.name,
address: userDetails.address,
};
}
function compareUserInfo(prev, next) {
return prev.name !== next.name || prev.address !== next.address;
}
const { name, address } = UserDetails.useSelector(selectUserInfo, compareUserInfo);
useProperty
and useProperties
hooks. Please keep in mind that these are still usable in production but will raise an error in development. Future versions will remove these two hooks.Published by lxsmnsyc over 4 years ago
useAsyncSelector
: similar to useSelector
but allows you to return a Promise.function AsyncCount() {
const state = Counter.useAsyncSelector(async (state) => {
await sleep(500);
return state.count;
});
switch (state.status) {
case 'failure': return <h1>An error occured.</h1>;
case 'success': return <h1>Count: {state.data}</h1>;
case 'pending': return <h1>Loading...</h1>;
default:
}
}
useSuspendedSelector
: similar to useAsyncSelector
but for Suspense
.function SuspendedCount() {
const count = Counter.useSuspendedSelector(async (state) => {
await sleep(500);
return state.count;
}, 'count/suspended');
return (
<h1>Count: {count}</h1>
);
}
useSuspendedState
: allows you to indefinitely suspended a component.function SuspendedState() {
const count = Counter.useSuspendedState((state) => ({
count: state.count,
suspend: state.count < 5,
}), 'state/suspended');
return (
<h1>Count: {count}</h1>
);
}
prop-types
.createModel
and can contain the following properties:displayName
: the name for the model's Provider
, useful for DevTools inspection, profiling and debugging.propTypes
: Validation map provided by prop-types
.defaultProps
useMemo
and useCallback
with useConstant
for faster memoization process.IProviderProps
as it shares the same properties as React.PropsWithChildren
MissingScopedModelError
to report that the scoped model instance nowhere to be found in the ancestor component tree, unlike before wherein it silently assumes that the tree has the instance, whether or not it does actually exists.