メインコンテンツへ進む

<RecoilURLSync>

Recoil Syncライブラリのコンポーネントで、syncEffect()またはurlSyncEffect()アトム効果とブラウザURLを使用してアトムを同期します。

function RecoilURLSync(props: {
  storeKey?: string,

  location: LocationOption,

  serialize: mixed => string,
  deserialize: string => mixed,

  browserInterface?: BrowserInterface,
  children: React.Node,
}): React.Node

storeKeyは、どのアトムをこの外部ストアと同期する必要があるかを一致させるために使用されます。

URLの場所​

locationプロパティは同期するURLのどの部分を指定します

type LocationOption =
  | {part: 'href'}
  | {part: 'hash'}
  | {part: 'search'}
  | {part: 'queryParams', param?: string};
  • queryParamsとparamの指定なし - アトムは個々のクエリパラメータと同期します
  • queryParamsとparamを指定 - アトムは単一のクエリパラメータでエンコードされます
  • search - 状態はクエリ検索文字列全体でエンコードされます
  • hash - 状態はアンカータグでエンコードされます
  • href - URL全体をエンコードできるようにエスケープします。有効で合法的なURLを提供することに注意する必要があります。

例​

URL永続化ガイドで例を参照してください。

カスタムシリアル化​

serialize()およびdeserialize()コールバックはカスタムシリアル化を提供できます

  serialize: x => JSON.stringify(x),
  deserialize: x => JSON.parse(x),

これらのコールバックはuseCallback()のようなものでメモライズして、レンダリングのたびにURLを再度解析しないようにする必要があります。同期されるURLの場所によっては、個々の値を使用してコールバックが呼び出されるか、複数の値を含むオブジェクトを使用してコールバックが呼び出されます。 <RecoilURLSyncJSON>や<RecoilURLSyncTransit>などのラッパーはこれらを提供します。

ブラウザーの抽象化​

デフォルトでは、<RecoilURLSync>はブラウザのURLと直接同期します。ただし、カスタムブラウザインターフェイスの実装を提供することでこれをオーバーライドできます。サーバーサイドレンダリング（SSR）環境で実行している場合にも、これを提供することが重要です。

type BrowserInterface = {
  replaceURL?: string => void,
  pushURL?: string => void,
  getURL?: () => string,
  listenChangeURL?: (handler: () => void) => (() => void),
};