react-live-store
Shared data container for React apps with a mutable-like API
A plain object stored in the React's useContext()
hook produces a re-render only if the entire object value has changed, which requires extra effort of mutating the object to convey a single nested property change.
The Store
class from this package makes an object capable of triggering an event whenever it's mutated, while the useStore()
hook subscribes a React component to such events.
Example
import {createContext, useContext} from 'react';
import {Store, useStore} from 'react-live-store';
import {createRoot} from 'react-dom/client';
const AppContext = createContext();
const Display = () => {
const state = useStore(useContext(AppContext));
return <span>{state.counter}</span>;
};
const PlusButton = () => {
const state = useStore(useContext(AppContext));
// The mutation of the store state is visible to
// components subscribed to this store
return <button onClick={() => state.counter++}>+</button>;
};
const App = () => <div><PlusButton/> <Display/></div>;
createRoot(document.querySelector('#app')).render(
<AppContext.Provider value={new Store({counter: 42})}>
<App/>
</AppContext.Provider>
);
By passing a string key of a nested object in the state as the second parameter of the useStore()
hook it is possible to subscribe to changes in this particular part of the store. Passing null
or false
as the second parameter will turn off the subscription to store changes altogether.
A React app can have multiple stores, whether in a single React Context or in separate Contexts.