// Общие базовые типы
// src/core/types/index.ts
export type ObjectType = Record<string, unknown> | null | undefined;
export type ErrorType = string | ObjectType;
export interface IIdentifiable { id: number; }

// Базовый класс для сторов, хранящих списки объектов
// src/core/store/BaseListStore.ts
import { observable, action, computed, makeObservable } from 'mobx';
import { ErrorType, ObjectType, IIdentifiable } from 'core/types';
export interface IListState<TListItem extends IIdentifiable> {
  results: TListItem[];
  count?: number; // число элементов на сервере. Нужно для пэйджинга.
  isLoading?: boolean;
  error?: ErrorType;
}
export default class BaseListStore<TListItem extends IIdentifiable> {
  @observable
  protected listState: IListState<TListItem> = {
    results: [],
  };
  constructor() {
    makeObservable<BaseListStore<TListItem>>(this);
  }
  @computed
  get list(): TListItem[] {
    return Array.isArray(this.listState.results)
       ? this.listState.results
       : [];
  }
  @action
  setListState(list: IListState<TListItem>) {
    this.listState = list;
  }
  @action
  addToList(item: TListItem) {
    this.list.push(item);
  }
  @action
  updateListItem(item: TListItem) {
    const foundTodo = this.list.find((i) => item && i.id === item.id);
    if (foundTodo && item) {
      Object.assign(foundTodo, item);
    }
  }
  ...
}
// для удобства экспортируется тип стора
export type BaseListStoreType = BaseListStore<IIdentifiable>;

// src/pages/todos/stores.tsx
import { IIdentifiable } from 'core/types';
export interface ITodoModel extends IIdentifiable {
  title: string;
  completed: boolean;
}
export type TodoListStoreType = BaseListStore<ITodoModel>;

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
import { ObjectType } from '../types';
axios.defaults.baseURL = process.env.REACT_APP_BASE_API_URL;
export type ApiServiceResponseType = Promise<AxiosResponse<any>>;
const apiService = {
  get: function (
    url: string,
    config?: AxiosRequestConfig,
  ): ApiServiceResponseType {
    return axios.get(url, config);
  },
  post: function (
    url: string,
    data: ObjectType,
    config?: AxiosRequestConfig,
  ): ApiServiceResponseType {
    return axios.post(url, data, config);
  },
  patch: function (
    url: string,
    data: ObjectType,
    config?: AxiosRequestConfig,
  ): ApiServiceResponseType {
    return axios.patch(url, data, config);
  },
  delete: function (
    url: string,
    config?: AxiosRequestConfig,
  ): ApiServiceResponseType {
    return axios.delete(url, config);
  },
};
export default apiService;

import apiService from './apiService';
import { IResponseList, IResponseModel, IResponseError } from './types';
import { IIdentifiable, ObjectType } from '../types';
export default class BaseApi<T extends IIdentifiable> {
  private readonly _apiUrl: string;
  get apiUrl(): string {
    return this._apiUrl;
  }
  constructor(apiUrl: string) {
    this._apiUrl = apiUrl;
  }
  async getList(
    params?: ObjectType,
  ): Promise<IResponseList<T> | IResponseError> {
    try {
      const ret = await apiService.get(this._apiUrl, { params });
      return { results: ret.data || [] };
    } catch (error) {
      return this.handleError(error);
    }
  }
  async update(
    modelData: { id: number },
    params?: ObjectType,
  ): Promise<IResponseModel<T> | IResponseError> {
    try {
      const ret = await apiService.patch(
        `${this._apiUrl}/${modelData.id}`,
        modelData,
        { params },
      );
      return { model: ret.data };
    } catch (error) {
      return this.handleError(error);
    }
  }
  protected handleError(e): IResponseError {
    let message = '';
    if (e.response) {
      message = e.message;
    }
    return { isError: true, message };
  }
}
export type BaseApiType = BaseApi<IIdentifiable>;

import { BaseStoreType } from '../store/BaseStore';
import { SearchParamsStoreType } from '../store/SearchParamsStore';
import { BaseApiType } from '../api/BaseApi';
import IIdentifiable from '../types/IIdentifiable';
import ObjectType from '../types/ObjectType';
import { isIResponseError } from '../api/types';
import { toast } from 'react-toastify';
export default class BaseController {
  private readonly _mainStore: BaseStoreType;
  private readonly _searchParamsStore: SearchParamsStoreType;
  private readonly _api: BaseApiType;
  constructor(mainStore: BaseStoreType,
              searchParamsStore: SearchParamsStoreType,
              api: BaseApiType) {
    this._mainStore = mainStore;
    this._searchParamsStore = searchParamsStore;
    this._api = api;
  }
  async getList() {
    const searchParams = this._searchParamsStore.getSearchParamsMergedToJS();
    const response = await this.api.getList(searchParams);
    if (isIResponseError(response)) {
      toast.error(response.message);
    } else {
      this.listStore.setListState({
        results: response.results,
        count: response.count,
      });
    }
  }
  async create(modelData: ObjectType) {
    const response = await this.api.create(modelData);
    if (isIResponseError(response)) {
      toast.error(response.message);
    } else {
      await this.getList(); // for apply filters
    }
  }
  setFilters = (filters: ObjectType) => {
    this.searchParamsStore.setFilters(filters);
  };
  ...
}

import { createContext } from 'react';
import BaseListStore from 'core/store/BaseListStore';
import BaseEditStore from 'core/store/BaseEditStore';
import SearchParamsStore from 'core/store/SearchParamsStore';
import {
  TodoListStoreType,
  TodoEditStoreType,
  TodoSearchParamsStoreType,
} from './pages/todos/stores';
import { createTodoAPI } from './pages/todos/api';
import BaseController from 'core/сontrollers/BaseController';
import TodoPage from './pages/todos/views/Page';
export interface IStoresContextValue {
  todoListStore: TodoListStoreType;
  todoEditStore: TodoEditStoreType;
  todoSearchParamsStore: TodoSearchParamsStoreType;
}
export const StoresContext =
  createContext<IStoresContextValue | null>(null)
  as Context<IStoresContextValue>;
export const stores: IStoresContextValue = {
  todoListStore: new BaseListStore(),
  todoEditStore: new BaseEditStore(),
  todoSearchParamsStore: new SearchParamsStore(),
};
export interface IControllersContextValue {
  todoController: BaseController;
}
export const ControllersContext =
  createContext<IControllersContextValue | null>(null)
  as Context<IControllersContextValue>;
export const controllers: IControllersContextValue = {
  todoController: new BaseController(
    stores.todoListStore,
    stores.todoEditStore,
    stores.todoSearchParamsStore,
    createTodoAPI('/todos'),
  ),
};
const App = () => {
  return (
    <div>
      <StoresContext.Provider value={stores}>
        <ControllersContext.Provider value={controllers}>
          <TodoPage />
        </ControllersContext.Provider>
      </StoresContext.Provider>
    </div>
  );
};

import { useEffect, useContext } from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import { observer } from 'mobx-react-lite';
import { ControllersContext, StoresContext } from 'contexts';
import { ITodoModel } from '../stores';
const TodoList = observer(() => {
  const { todoListStore } = useContext(StoresContext);
  const { todoController } = useContext(ControllersContext);
  const handleChange = (item) => {
    todoController.update({
      id: item.id,
      completed: !item.completed,
    } as ITodoModel);
  };
  useEffect(() => {
    todoController.getList();
  }, []);
  return (
    <List>
      {todoListStore.list.map((item) => (
        <ListItem key={item.id} dense button>
          ...
        </ListItem>
      ))}
    </List>
  );
});
export default TodoList;