<RecoilURLSyncTransit>

一個元件來自於 Recoil Sync 函式庫，用於使用 syncEffect() 或 urlSyncEffect() 原子效應與瀏覽器 URL 同步。

這與 <RecoilURLSync> 元件相同，但它提供內建 Transit 編碼。

function RecoilURLSyncTransit(props: {
  ...RecoilURLSyncOptions,
  handlers?: Array<TransitHandler<any, any>>,
}): React.Node

• handlers - 自訂類別 的處理常式陣列 (Optional)。這是一個穩定的或備忘的陣列實例非常重要。否則，當偵聽器重新訂閱時，您可能會錯過 URL 更改。

---

Transit 編碼不像僅使用 JSON 那樣簡潔或可讀，但是它可以支援 `Map` 和 `Set` JavaScript 容器以及自訂使用者類別。

自訂類別

使用 `handlers` prop 可以定義自訂使用者類別的處理常式

type TransitHandler<T, S> = {
  tag: string;
  class: Class<T>;
  write: (T) => S;
  read: (S) => T;
};

範例

class ViewState {
  active: boolean;
  pos: [number, number];
  constructor(active: boolean, pos: [number, number]) {
    this.active = active;
    this.pos = pos;
  }
  // ...
}
const viewStateChecker = custom((x) => (x instanceof ViewState ? x : null));

const HANDLERS = [
  {
    tag: 'VS',
    class: ViewState,
    write: (x) => [x.active, x.pos],
    read: ([active, pos]) => new ViewState(active, pos),
  },
];

function MyApp() {
  return (
    <RecoilRoot>
      <RecoilURLSyncTransit
        storeKey="transit-url"
        location={{part: 'queryParams', param: 'state'}}
        handlers={HANDLERS}>
        {/* children */}
      </RecoilURLSyncTransit>
    </RecoilRoot>
  );
}

const ViewState = atom<ViewState>({
  key: 'ViewState',
  default: new ViewState(true, [1, 2]),
  effects: [syncEffect({storeKey: 'transit-url', refine: viewStateChecker})],
});