Skip to main content

Implementing a Store

While the library comes with some built-in stores, you can implement your own using <RecoilSync>. Specify an optional storeKey to identify and match up which atoms should sync with which store. Then, specify the following optional callbacks to define the behavior for your store:

  • read - How to read an individual item from the external store, such as when initializing the atom.
  • write - How to write mutated atom state to the external store.
  • listen - How to subscribe to async updates from the store to mutate atom state.

See the <RecoilSync> API reference for the full details on the callbacks.

Example Syncing with React Props

An example store using <RecoilSync> that will initialize atoms based on React prop values:

function InitFromProps({children, ...props}) {
return (
<RecoilSync
storeKey="init-from-props"
read={itemKey => props[itemKey]}
>
{children}
</RecoilSync>
);
}

Example Syncing with User Database

An example store using <RecoilSync> that will synchronize with a custom database:

function SyncWithDB({children}) {
const connection = useMyDB();
return (
<RecoilSync
storeKey="my-db"
read={itemKey => connection.get(itemKey)}
write={({diff}) => {
for (const [key, value] of diff) {
connection.set(key, value);
}
}}
listen={({updateItem}) => {
const subscription = connection.subscribe((key, value) => {
updateItem(key, value);
});
return () => subscription.release();
}}
>
{children}
</RecoilSync>
);
}