Как организуются samples и подписки на события в Effector при использовании FSD?

Организация sample и подписок в Effector с FSD

Feature-Sliced Design (FSD) предполагает строгую иерархию слоев: shared, entities, features, widgets, pages, app. В Effector важно, чтобы события и сторы не создавали циклических зависимостей между слоями. Для этого используется sample, который позволяет декларативно связывать источники (source) с целью (target) без прямого импорта.

Пример использования sample

Допустим, в entities/user есть стор $user и событие fetchUserFx. В features/auth мы хотим при успешной авторизации обновить пользователя. Вместо прямого вызова fetchUserFx из features, мы используем sample:

// features/auth/model.ts
import { createEvent, sample } from 'effector';
import { $user, fetchUserFx } from 'entities/user';

export const loginFx = createEffect(async (data) => {
  // логика авторизации
});

sample({
  clock: loginFx.done,
  target: fetchUserFx,
});

Здесь sample подписывается на успешное завершение loginFx и запускает fetchUserFx. Это сохраняет направление зависимости: features -> entities, а не наоборот.

Подписки через watch

Для отладки или побочных эффектов можно использовать watch, но в FSD рекомендуется избегать watch внутри бизнес-логики, так как это может привести к неявным связям. Лучше использовать sample для явных связей.

// Пример watch для логирования
import { $user } from 'entities/user';

$user.watch((user) => {
  console.log('User updated:', user);
});

Вывод

Использование sample в FSD помогает поддерживать чистую архитектуру, избегая циклических зависимостей и делая связи между модулями явными. Это упрощает рефакторинг и тестирование, особенно в больших проектах.