Эта страница еще не переведена

Чтобы добавить перевод, откройте Pull Request по этой ссылке.

Отображается содержимое для языка по умолчанию.

tip

There is the official Next.js bindings package - @effector/next. Follow its documentation to find out, how to integrate Next.js with effector.

This is a simplified example of integration with the Next.js router. We create a similar model for storing the router instance:

import { attach, createEvent, createStore, sample } from 'effector'
import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime'

const routerAttached = createEvent<AppRouterInstance>()
const navigationTriggered = createEvent<string>()

const $router = createStore<AppRouterInstance | null>(null).on(
  routerAttached,
  (_, router) => router,
)

const navigateFx = attach({
  source: $router,
  effect: (router, path) => {
    if (!router) return
    return router.push(path)
  },
})

sample({
  clock: navigationTriggered,
  target: navigateFx,
})

export { navigationTriggered, routerAttached }

We make provider:

import { useUnit } from 'effector-react';
import { useRouter } from 'next/navigation'

export function EffectorRouterProvider({ children }: { children: React.ReactNode }) {
  const router = useRouter()
  const attachRouter = useUnit(routerAttached)

  useEffect(() => {
    attachRouter(router)
  }, [router, attachRouter])

  return <>{children}</>
}

We use provider:

import { EffectorRouterProvider } from '@/providers/effector-router-provider';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <EffectorRouterProvider>
          {children}
        </EffectorRouterProvider>
      </body>
    </html>
  );
}

And we use it in our models:

import { sample } from 'effector';

    ...

sample({
    clock: getUserFx.done,
    fn: () => '/home',
    target: navigationTriggered,
});

or in components:

'use client';

import { useUnit } from 'effector-react';
import { navigationTriggered } from '@/your-path-name';

    ...

export function goToSomeRouteNameButton() {
  const goToSomeRouteName = useUnit(navigationTriggered);

  return (
    <button onClick={() => goToSomeRouteName('/some-route-name')}>
      do it!
    </button>
  );
}
Перевод поддерживается сообществом

Документация на английском языке - самая актуальная, поскольку её пишет и обновляет команда effector. Перевод документации на другие языки осуществляется сообществом по мере наличия сил и желания.

Помните, что переведенные статьи могут быть неактуальными, поэтому для получения наиболее точной и актуальной информации рекомендуем использовать оригинальную англоязычную версию документации.

Соавторы
Commits