// Создаем хранилище, в котором будет лежать массив пользователей
// IUser — интерфейс, описывающий пользователя (имя, фамилия и т.п.)
export const $users = createStore<IUser[]>([]);
// Создаем событие, принимающее параметр IUser
export const update = createEvent<IUser>();
// Обычный хендлер на обновление. Добавляем или изменяем пользователя
const updateStore = (state: IUser[], data: IUser) => {
  const userIndex = state.findIndex((user) => user.id === data.id);
  // Изменяем стейт
  if (userIndex > -1) {
    state.splice(userIndex, 1, data);
  } else {
    state.push(data);
  }
  // Возвращаем измененный стейт
  return [...state];
};
// Подписываемся на событие в хранилище
$users
  .on(update, updateStore);

import { useStore } from 'effector-react';
import { $users, update } from 'models/users';
export const UserList = () => {
  const users = useStore($users);
  const mockUser = {
    id: 1111,
    name: 'Peter',
    surname: 'Jonson',
    age: 25,
    gender: 'male',
  };
  const usersItems = users.map((user) => (
    <div key={user.id}>
      <div>Name: {user.name}</div>
      <div>Surname: {user.surname}</div>
      <div>Age: {user.age}</div>
      <div>Gender: {user.gender}</div>
      <br/>
    </div>
  ));
  return (
    <div>
      {usersItems}
      <button onClick={() => update(mockUser)}>
        Add mock user to Effector store
      </button>
    </div>
  );
};

import { useList } from 'effector-react';
import { $users, update } from 'models/users';
export const UserList2 = () => {
    // Можно преобразовать в массив нод сразу при подключении.
    // Не нужно использовать пропс key, как было с map()
  const users = useList($users, (user) => (
    <div>
      <div>Name: {user.name}</div>
      <div>Surname: {user.surname}</div>
      <div>Age: {user.age}</div>
      <div>Gender: {user.gender}</div>
      <br/>
    </div>
  ));
  const mockUser = {
    id: 2222,
    name: 'Diana',
    surname: 'Gregory',
    age: 22,
    gender: 'female',
  };
  return (
    <div>
      {users}
      <button onClick={() => update(mockUser)}>
        Add mock user to Effector store
      </button>
    </div>
  );
};

// Создаем эффекты для получения и изменения данных о пользователях
// IUserPayload - интерфейс пользователя, приходящий с сервера
export const getUsersFx = createEffect<void, IUserPayload[], Error>();
export const updateUserFx = createEffect<
  IUserPayload,
  IUserPayload,
  Error
>();
// Изменяем формат данных из хранилища в формат, необходимый для отправки запроса
const serializeDataBeforeFetch = attach<
  IUser,
  Store<IUser[]>,
  typeof updateUserFx
  >({
  effect: updateUserFx,
  source: $users,
  mapParams: (params: IUser, data: IUser[]) => {
    const user = data.find((item) => item.id === params.id)!;
    const userCopy = { ...user };
    delete userCopy?.onlineStatus;
    return userCopy;
  },
});

// Учебный пример.
// Предположим, на клиенте нужно дополнительное поле со статусом пользователя.
// Оно не приходит с сервера, и мы добавляем его искусственно.
// Добавляем поле Статус каждому пользователю
const serializeUsers = (state: IUser[]) =>
  state.map((user) => ({ ...user, onlineStatus: true }));
/**
* Новое хранилище, зависимое от хранилища $users.
* Данные из $users прогоняются через функцию serializeUsers
* и сохраняются в новое хранилище, которое можно использовать в компоненте
*/
export const $usersWithStatus = $users.map(serializeUsers);

/* МОДЕЛЬ В EFFECTOR */
// Создаем эффект, который делает GET-запрос на бек
export const getUsersFx = createEffect<void, IUserPayload[], Error>();
// Создаем хранилище, в котором будет лежать ошибка, если GET-запрос зафейлится
// I вариант
export const $fetchError = restore<Error>(getUsersFx.failData, null);
// Создаем другое хранилище, содержащий всю информацию по GET-запросу
export const $usersGetStatus = combine({
  loading: getUsersFx.pending,
  error: $fetchError,
  data: $users,
});

/* КОМПОНЕНТ, ИСПОЛЬЗУЮЩИЙ ХРАНИЛИЩЕ */
export const UserList3 = () => {
  // Подключаем хранилище в компонент
  const { loading, error, data } = useStore($usersGetStatus);
  // Делаем запрос на бек на didMount
  useEffect(() => {
    getUsersFx();
  }, []);
  if (loading) {
    return (
      <div>Загрузка...</div>
    );
  }
  if (error) {
    return (
      <div>
        <span><b>Произошла ошибка: </b></span>
        <span>{error.message}</span>
      </div>
    );
  }
  const usersItems = data.map((user) => (
    <div key={user.id}>
      <div>Name: {user.name}</div>
      <div>Surname: {user.surname}</div>
      <div>Age: {user.age}</div>
      <div>Gender: {user.gender}</div>
      <br/>
    </div>
  ));
  return (
    <div>
      {usersItems}
    </div>
  );
};

// II вариант
export const $fetchError = createStore<Error | null>(null);
$fetchError
  .on(getUsersFx.fail, (_, { error }) => error)
  .reset(getUsersFx.done);

/* СОЗДАНИЕ СОБЫТИЯ */
// Создаем событие на обновление хранилища
export const update = createEvent<IUser>();
// Хендлер на обновление хранилища (был описан выше)
const updateStore = (state: IUser[], data: IUser) => {
  const userIndex = state.findIndex((user) => user.id === data.id);
  // Изменяем стейт
  if (userIndex > -1) {
    state.splice(userIndex, 1, data);
  } else {
    state.push(data);
  }
  // Возвращаем измененный стейт
  return [...state];
};
// Подписываемся на обновление хранилища через хендлер
$users
  .on(update, updateStore)
/**********************************************************/
/* СОЗДАНИЕ ЭФФЕКТА */
// Создаем эффект для изменения данных о пользователе (Запрос на бек)
export const updateUserFx = createEffect<IUserPayload, IUserPayload, Error>();
// Асихронная функция запроса на бек
const updateUser = async (data: IUserPayload): Promise<IUserPayload> => {
  const res = await axios({
    url: `/users/${data.id}`,
    method: 'PATCH',
  });
  return res.data;
}
// Привязываем к эффекту
updateUserFx.use(updateUser);
/**********************************************************/
/* ПРЕОБРАЗОВАНИЕ ДАННЫХ */
// Изменяем формат данных из хранилища в формат, необходимый для отправки запроса
// (Удаляем искусственное поле onlineStatus)
const serializeDataBeforeFetch = attach<
  IUser,
  Store<IUser[]>,
  typeof updateUserFx
  >({
  effect: updateUserFx,
  source: $users,
  mapParams: (params: IUser, data: IUser[]) => {
    const user = data.find((item) => item.id === params.id)!;
    const userCopy = { ...user };
    delete userCopy?.onlineStatus;
    return userCopy;
  },
});
// Связываем событие и функцию-преобразователь
forward({
  from: update,
  to: serializeDataBeforeFetch,
});