React

@virentia/react подключает модели ядра к React-компонентам.

Доменную логику держите в @virentia/core, а к React подключайте через этот пакет.

Передача scope

ScopeProvider передает scope в React-дерево.

import { scope } from "@virentia/core";
import { ScopeProvider } from "@virentia/react";

const appScope = scope();

export function App() {
  return (
    <ScopeProvider scope={appScope}>
      <Routes />
    </ScopeProvider>
  );
}

Чтение стора

const count = useUnit(model.count);

Вызов события

const incremented = useUnit(model.incremented);

return <button onClick={() => incremented(1)}>{count}</button>;

Использование модели

const viewModel = useModel(model);

Сторы становятся значениями. События и эффекты становятся функциями для вызова.

return <button onClick={() => viewModel.incremented(1)}>{viewModel.count}</button>;

Быстрый вариант через component

component создает модель из props и передает в view уже подготовленный для рендера вариант.

export const Counter = component({
  model: createCounterModel,
  view({ model }) {
    return <button onClick={() => model.incremented(1)}>{model.count}</button>;
  },
});

Страницы React

• useUnit
• Модели и компоненты
• Кешированные модели