How to use the @reactorx/core.useStore function in @reactorx/core

export function ReactorxConnect({ history }: { history: History }) {
  const store$ = useStore();

  // have to do once to load stored location before mount
  useMemo(() => {
    const state = store$.getState();
    if (state[locationStorageKey]) {
      history.replace(state[locationStorageKey]);
    }
  }, []);

  useEffect(() => {
    const unlisten = history.listen((location) => {
      routerChanged.with(location).invoke(store$);
    });
    return () => {
      unlisten();
    };

function FormMount({ formName, initialValues }: { formName: string; initialValues: any }) {
  const store$ = useStore();

  // to make sure before autoFocus
  useLayoutEffect(() => {
    formInitial.with(initialValues, { form: formName }).invoke(store$);
  }, [formName]);

  return null;
}

export const usePersist = (key: string, opts: Partial = {}) => {
  const store$ = useStore();

  // register persist key before all
  // ugly but have to
  useMemo(() => {
    if (!(store$.getState()[persistedKeys] || {})[key]) {
      persist
        .with(undefined, {
          ...opts,
          key: key,
        })
        .invoke(store$);
    }
  }, []);

  return null;
};

export const FieldArray = ({ name, children }: IFieldArrayProps) => {
  const store$ = useStore();
  const ctx = useForm();
  const fieldName = `${ctx.fieldPrefix || ""}${name}`;
  const { value } = useFieldState(fieldName);

  const triggers = {
    add(defaultValue?: any) {
      formUpdateField
        .with(
          {
            value: [...(value || []), defaultValue],
          },
          {
            form: ctx.formName,
            field: fieldName,
          },
        )

export function Field(props: IFieldProps) {
  const store$ = useStore();
  const { fieldPrefix, formName, getFormState } = useForm();

  const fieldName = `${fieldPrefix || ""}${props.name}`;

  const fieldFullName = `${formName}.${fieldName}`;

  useEffect(() => {
    const values = getFormState().values;
    const defaultValue = get(values, fieldName) || props.defaultValue;

    formAddField
      .with(
        {
          defaultValue,
          error: createValidate(props.validate, props.required)(defaultValue),
        },

export function useNewForm(formName: string, initialValues = {} as Partial) {
  const store$ = useStore();

  const ctx = useMemo(() => {
    const startSubmit = () => {
      return formStartSubmit.with(undefined, { form: formName }).invoke(store$);
    };

    const endSubmit = () => {
      return formEndSubmit.with(undefined, { form: formName }).invoke(store$);
    };

    const setErrors = (errors: Dictionary) => {
      return formSetErrors.with(errors, { form: formName }).invoke(store$);
    };

    const getFormState = () => {
      return store$.getState()[formKey(formName)] || ({} as IFormState);

export function useRequest(
  requestActor: RequestActor,
  options: IUseRequestOpts = {},
) {
  const { actor$, dispatch } = useStore();
  const requesting$ = useMemo(() => new BehaviorSubject(!!options.required), []);

  const lastRequestActor = useRef | null>(null);
  const lastCallbackRef = useRef>({});

  const optionsRef = useRef(options);
  useEffect(() => {
    optionsRef.current = options;
  });

  const cancelIfExists = () => {
    lastRequestActor.current && lastRequestActor.current.cancel.invoke({ dispatch });
  };

  useEffect(() => {
    const subject$ = new Subject();

function FormUnmount({ formName }: { formName: string }) {
  const store$ = useStore();

  useEffect(() => {
    return () => {
      formDestroy.with(undefined, { form: formName }).invoke(store$);
    };
  }, [formName]);

  return null;
}