Effector

import { createStore, createEvent, createEffect, sample } from 'effector';

// Events
const increment = createEvent();
const decrement = createEvent();
const fetchUser = createEvent<string>();

// Effect (async operation)
const fetchUserFx = createEffect(async (id: string) => {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
});

// Store
const $count = createStore(0)
  .on(increment, (state) => state + 1)
  .on(decrement, (state) => state - 1);

const $user = createStore<User | null>(null)
  .on(fetchUserFx.doneData, (_, user) => user);

// Derived store
const $doubledCount = $count.map((count) => count * 2);

// Sample (connect events and stores)
sample({
  clock: fetchUser,
  target: fetchUserFx,
});

// React component
import { useUnit } from 'effector-react';

function Counter() {
  const count = useUnit($count);
  const doubled = useUnit($doubledCount);
  const [inc, dec] = useUnit([increment, decrement]);

  return (
    <div>
      <p>العدد: {count}</p>
      <p>المضاعف: {doubled}</p>
      <button onClick={inc}>زيادة</button>
      <button onClick={dec}>تقليل</button>
    </div>
  );
}