<RecoilURLSyncTransit>

来自 Recoil 同步库 的一个组件，用于使用 syncEffect() 或 urlSyncEffect() 原子效果与浏览器 URL 同步原子。

这与 <RecoilURLSync> 组件相同，只是它提供内置的 Transit 编码。

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

• handlers - 自定义类 处理程序的可选数组。重要的是，这是一个稳定的或已记忆的数组实例。否则，您可能会错过 URL 更改，因为监听器已重新订阅。

---

Transit 编码不像直接使用 JSON 那样简洁或可读，但它可以支持 Map 和 Set JavaScript 容器以及自定义用户类。

自定义类

自定义用户类的处理程序可以使用 handlers 属性定义。

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})],
});