Effector modal model

index.js

// Публичный API модалки

export { NameModal } from "./NameModal";
export { openModal as openNameModal, nameIsUpdated } from "./model";

model.js

// Для модалки лучше создать собственную модель. К примеру у тебя модалка с инпутом name и кнопкой save:

import { createEvent, createStore, restore, sample } from "effector";

// Public
export const nameIsUpdated = createEvent();

// Modal
export const openModal = createEvent();
export const closeModal = createEvent();
export const $isOpenModal = createStore(false);

// Actions
export const saveNameAction = createEvent();

// Name
export const updateName = createEvent();
export const $name = restore(updateName, "");

// Init
$isOpenModal.on(openModal, () => true);
$isOpenModal.on(closeModal, () => false);

sample({
  source: $name,
  clock: saveNameAction,
  target: nameIsUpdated,
});

NameModal.jsx

// Сам компонент модалки при этом будет выглядеть примерно так:

// ...

const onSubmit = () => {
  closeModal();
  saveNameAction();
};

// Component
export const NameModal = () => (
  <Modal
    isOpen={useStore($isOpenModal)}
    title="Enter new name”
    onClose={closeModal}
    onCancel={closeModal}
    cancelText="Cancel"
    onSubmit={onSubmit}
    submitText="Save”
  >
      <NameInput />
  </Modal>
);

outer.js

// в другой модели подключаешь эту модалку к какому-нибудь экшену и подписываешься на основной ивент:

// ...

sample({
  source: changeNameAction,
  target: openNameModal,
});

sample({
  source: nameIsUpdated,
  target: changeNameFx,
});

// ...