useSyncState
This is like store.useSyncState but it also observers the updates on path
(push strategy) and forces the component to update.
Arguments
subtree
(string): The subtree that you want to fetch the state frompath
(string?, default: ""): The path to state that you want to read and updatedepth
(number?, default: 1): Same as depth in observe
Returns
(Array
): An array with the following elements in order
- State at path.
- A function to modify the state.
- Same as here
- A dispatch function for you to dispatch any action to the internal Redux store.
Example
import { createDocStore } from "@syncstate/core";
import { useDoc } from "@syncstate/react";
const store = createDocStore({ counter: { count: 0 } }, []);
// Inside a React component
const [counter, setCounter, dispatch] = useDoc("/counter");
const increment = () =>
setCounter((counter) => {
counter.count++;
});
const decrement = () =>
setDoc((counter) => {
counter.count--;
});