view-model-factory.tsx

import { FC, createContext, useContext } from 'react';

export function createModelFactory<T extends (...args: any[]) => any>(creator: T) {
  type Model = ReturnType<typeof creator>;
  type ModelProps = { model: Model };

  const Context = createContext<Model | null>(null);

  function useModel() {
    const model = useContext(Context);

    if (!model) {
      throw new Error('Model not found.');
    }

    return model;
  }

  function view<T>(Component: FC<T>) {
    return (props: T & ModelProps) => (
      <Context.Provider value={props.model}>
        <Component {...props} />
      </Context.Provider>
    );
  }

  return {
    createModel: creator,
    useModel,
    view,
  };
}

Usage

Declare model:

import { createEvent, sample } from 'effector';

import { createDialogApi } from '@client/shared/libs/effector-helpers/dialog';
import { createModelFactory } from '@client/shared/libs/effector-helpers/view-model-factory';

export const factory = createModelFactory(() => {
  const dialog = createDialogApi();

  const confirm = createEvent();
  const confirmed = createEvent();
  const declined = createEvent();

  sample({
    clock: confirm,
    target: dialog.show,
  });

  sample({
    clock: [confirmed, declined],
    target: dialog.hide,
  });

  return {
    dialog,
    confirm,
    confirmed,
    declined,
  };
});

Declare view:

import { useEvent, useStore } from "effector-react";

import { factory } from "./model";

interface DeleteConfirmationDialogProps {}

export const DeleteConfirmationDialog =
  factory.view<DeleteConfirmationDialogProps>((props) => {
    const { cover, text } = props;

    const model = factory.useModel();

    const onConfirm = useEvent(model.confirmed);
    const onDecline = useEvent(model.declined);

    const isVisible = useStore(model.dialog.$isVisible);

    return (
      <Dialog visible={isVisible} onClose={onDecline}>
        <Button size="xl" variant="default" onPress={onConfirm}>
          Удалить
        </Button>

        <Button size="xl" variant="clear" onPress={onDecline}>
          Оставить всё как есть
        </Button>
      </Dialog>
    );
  });

Apply:

const deleteConfirmationModel = factory.create()

<DeleteConfirmationDialog model={deleteConfirmationModel} />