Recipes
#
Fetching the root state/document#
Fetching state at a pathThe path here is similar (but not the same) to JSON patches RFC 6902. Instead of a string of keys/indexes joined by /
, it is an array of keys/indexes.
You can specify the depth which will define how deep the changes into your state will be listened to by the component to rerender.
The above will rerender the component if the generated patch has path matching any of the below
"/path"
"/path/to"
"/path/to/3"
"/path/to/3/state"
"/path/to/3/state/anything"
"/path/to/3/state/anything/anything2"
#
Replacing vs mutating state#
ActionsWe are using action as a generic term for a function that updates your document.
You can define actions outside your component. This way, the state management part of your application can stay separate from your UI.
#
Async actionsPerforming async actions doesn't require any special API in SyncState. You can call the setter function returned from useDoc whenever your data is ready.
#
Observing and intercepting changes at a path#
Combine separate treesIf you are coming from Redux, you might be wondering how to have different state trees with their separate login(reducers) and combine them using something like combineReducers.
SyncState is document based because it works on JSON patches that update a single document in the store. This makes it easy to sync this document across network or threads and create a multi-user realtime app.
You can keep the logic separate for different parts of your app just by having different actions
#
Sync a document with another documentYou can observe a document in a store for changes and apply the changes to a document in a another store. The other store may be on another thread or a server or another client.