ты не внутри кнопки методы меняй, а вокруг.
подставляй в UI необходимые элементы в зависимости от условий

если нет адреса, то добавь кнопку «Добавь адрес»

блин вот реально императивно решается до смеха просто:

<button onClick={() => {
  if (address) {
    next();
  } else {
    showAddressDialog({ onSuccess: next });
  }
}} />

При этом другой код может спокойно тоже вызывать showAddressDialog и по итогу принимать другие действия

А с эффектором пока трудновато идёт решение

спасибо большое за совет свысока
я показываю что одно решение пишется просто, а другое... не особо-то пока понятно и как

Чатик, а какие есть варианты сделать «правильно»?
Первое что приходит на ум - guard, но там else нет.
Второе - split, где next() будет в default кейсе

<>
  {address && <button onClick={next}>next</button>}
  {!address && <button onClick={showAddressDialog}>show dialog</button>}
</>

очень сложно пишется )))

а ты ещё забываешь про действие _после_ модалки
Если модалка открылась в результате попытки пользователя попасть на второй шаг, надо кинуть его на второй шаг
Но её можно открыть и в другой момент, и тогда по закрытию кидать на след. шаг не надо

а ты ещё забываешь про действие _после_ модалки
Если модалка открылась в результате попытки пользователя попасть на второй шаг, надо кинуть его на второй шаг
Но её можно открыть и в другой момент, и тогда по закрытию кидать на след. шаг не надо

модалка привязана к шагам или всё таки к модели пользователя (конкретно к его адресу)?

по-моему тут всё предельно понятно https://t.me/effector_ru/152866

удачи

Чатик, а какие есть варианты сделать «правильно»?
Первое что приходит на ум - guard, но там else нет.
Второе - split, где next() будет в default кейсе

зачем тут усложнять. next дизаблишь если нет адреса, если нет адреса показываем модалку/поле для добавления адреса или кнопку для показа модалки с формой

<form>
  {!address && <button onClick={showAddressDialog}>show dialog</button>}
  <button onClick={next} disabled={!Boolean(address)}>next</button>
</form>

зачем тут усложнять. next дизаблишь если нет адреса, если нет адреса показываем модалку/поле для добавления адреса или кнопку для показа модалки с формой

<form>
  {!address && <button onClick={showAddressDialog}>show dialog</button>}
  <button onClick={next} disabled={!Boolean(address)}>next</button>
</form>

А теперь такая задачка

На первом шаге есть условно кнопка "next"
По клику на неё
— если пользователь залогинен (== есть user address, считайте это айди пользователя), то направить на второй шаг
— если нет, кинуть ивент (типа address required), дождаться когда появится user address, когда появился — направить на второй шаг

Нагородил тут вот такое решение:

export const setAddress = createEvent<string | null>();
export const address = restore(setAddress, null);

export const next = createEvent();
const requireAddress = createEvent();

export const requireAddressFx = createEffect({
  handler: () => {
    requireAddress();
    const unsub = address.subscribe(value => {
      if (value) {
        next();
        unsub();
      }
    });
  },
});

export const addressDialogDismiss = createEvent();

guard({
  source: sample(address, next),
  filter: address.map(x => !x),
  target: requireAddressFx,
});

export const awaitingAddress = createStore(false)
  .on(requireAddress, () => true)
  .on(addressDialogDismiss, () => false)
  .on(address, (_, payload) => !payload);

названия мне не нравятся совсем, не хватает неймспейсинга наверное

Но основной вопрос — правильно ли делать эффект, который подписывается на стор и отписывается в коллбеке subscribe?

В эффекторе 100% кейсов можно решить установив связи между юнитами используя композицию связывающих методов (guard, sample, merge, event.prepend), потому что каждый из этих методов\функций возвращает ивент.

дизейблить next это другой UX и отдельная тема для обсуждения
во-вторых в твоём случае вью знает про шаги и какие данные нужны чтобы перейти
так-то и без эффектора можно написать вообще)

https://share.effector.dev/Y22WMWCL
вот кейс с гвардом и доп эффектом