跳转到主要内容

Implementing a Store

While the library comes with some built-in stores, you can implement your own using useRecoilSync() or <RecoilSync/>. The hook and component forms are equivalent, use whichever is more convenient for you. 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 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(props) {
return (
<RecoilSync
storeKey="init-from-props"
read={itemKey => props[itemKey]}
/>
);
}

Example Syncing with User Database

An example store using useRecoilSync() that will synchronize with a custom database:

function SyncWithDB() {
const connection = useMyDB();
useRecoilSync({
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();
},
});
return null;
}