Minimalist shared state management for React apps
- Similar to
useState() - No boilerplate
- Painless transition from local state to shared state and vice versa
- SSR-compatible
Installation: npm i groundstate
Moving the local state to the full-fledged shared state:
import {createContext, useContext} from 'react';
+ import {Store, useStore} from 'groundstate';
+
+ let AppContext = createContext(new Store(0));
let Counter = () => {
- let [counter, setCounter] = useState(0);
+ let [counter, setCounter] = useStore(useContext(AppContext));
let handleClick = () => {
setCounter(value => value + 1);
};
return <button
};
let ResetButton = () => {
- let [, setCounter] = useState(0);
+ let [, setCounter] = useStore(useContext(AppContext), false);
let handleClick = () => {
setCounter(0);
};
return <button
};
let App = () => <><Counter/>{' '}<ResetButton/></>;🔹 The Groundstate's shared state setup is very similar to useState() allowing for quick migration from local state to shared state or the other way around.
🔹 The false parameter in useStore(store, false) (as in <ResetButton> above) tells the hook not to subscribe the component to tracking the store state updates. The common use case is when the component doesn't make use of the store state value, but it may use the state setter.
🔹 An application can have as many stores as needed, whether on a single React Context or multiple Contexts.
let AppContext = createContext({
users: new Store(/* ... */),
items: new Store(/* ... */),
});🔹 Apart from a boolean, useStore(store, shouldUpdate) can take a function of (nextState, prevState) => boolean as the second parameter to filter store updates to respond to:
let ItemCard = ({id}) => {
let hasRelevantUpdates = useCallback((nextItems, prevItems) => {
return nextItems[id].revision !== prevItems[id].revision;
}, [id]);
let [items, setItems] = useStore(
useContext(AppContext).items,
hasRelevantUpdates,
);
return (
// content
);
};🔹 Shared state can be provided to the app by means of a regular React Context provider:
let App = () => (
- <AppContext.Provider value={42}>
+ <AppContext.Provider value={new Store(42)}>
<PlusButton/>{' '}<Display/>
</AppContext.Provider>
);🔹 A store can contain data of any type.
Live demos:
Primitive value state
Object value state
🔹 Immer can be used with useStore() just the same way as with useState() to facilitate deeply nested data changes.
🔹 A store initialized outside a component can be used as the component's remount-persistent state.