{"id":334165,"date":"2022-06-07T15:00:29","date_gmt":"2022-06-07T15:00:29","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=334165"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=334165","title":{"rendered":"C\u043b\u043e\u0451\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0438\u043b\u0438 \u041e\u041e\u041f \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c React \/ Mobx \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u0421\u0438\u0434\u0435\u043b \u044f \u043a\u0430\u043a-\u0442\u043e \u0432\u0435\u0447\u0435\u0440\u043e\u043c \u0441 \u043a\u0440\u0443\u0436\u043a\u043e\u0439 \u0447\u0430\u044f \u0438 \u0432\u0434\u0440\u0443\u0433, \u043d\u0438 \u0441 \u0442\u043e\u0433\u043e \u043d\u0435 \u0441 \u0441\u0435\u0433\u043e, \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u043f\u043e\u0447\u0442\u0443 \u043e \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u043d\u0430 \u0441\u0442\u0430\u0442\u044c\u044e <\/a>\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f<\/p>\n

<\/figcaption><\/figure>\n

\u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0449\u0435 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0442\u0438\u043b\u0435. \u041e\u0441\u043e\u0431\u043e \u0432\u044b\u0434\u0435\u043b\u0438\u043b\u0441\u044f \u0432 \u044d\u0442\u043e\u043c \u0434\u0435\u043b\u0435 React, \u043f\u043e\u0441\u043b\u0435 \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0445\u0443\u043a\u043e\u0432 \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0430\u043b \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u043c \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u043a \u043c\u043e\u0434\u0435\u0440\u043d\u0438\u0437\u0430\u0446\u0438\u0438<\/p>\n

\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043e\u0442\u043b\u0438\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0432\u044b\u0431\u043e\u0440 \u043f\u0440\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 UI \u043e\u0442 OpenSource \u0438 \u043a\u043e\u0440\u043f\u043e\u0440\u0430\u0446\u0438\u0439. MUI<\/a> \u043e\u0442 Google, BaseWeb<\/a> \u043e\u0442 Uber, Fluent UI (Fabric)<\/a> \u043e\u0442 Microsoft, Chakra UI<\/a> \u043e\u0442 \u043a\u043e\u043c\u043c\u044c\u044e\u043d\u0438\u0442\u0438 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435<\/p>\n

\u0421\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043b\u0443\u0447\u0448\u0435 \u043a\u0440\u0430\u0439\u043d\u0435 \u0442\u0440\u0443\u0434\u043e\u0437\u0430\u0442\u0440\u0430\u0442\u043d\u043e \u0438 \u0441\u043b\u043e\u0436\u043d\u043e \u043a \u043f\u043e\u0438\u0441\u043a\u0443 \u043a\u0430\u0434\u0440\u043e\u0432. \u0414\u0443\u043c\u0430\u044e, \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0441\u043e\u0447\u0435\u0442\u0430\u0442\u044c \u0434\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0441\u0442\u0438\u043b\u0435 \u041e\u041e\u041f \u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439<\/p>\n

\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 JavaScript \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432<\/h2>\n

Backbone, Marionette \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u043a\u0440\u0438 \u0440\u0430\u0437\u043c\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0442\u043e\u043d\u043a\u0438\u043c \u0441\u043b\u043e\u0435\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e \u043c\u0435\u0442\u043e\u0434\u0430\u043c \u043a\u043b\u0430\u0441\u0441\u0430 \u0438 \u043a\u0440\u0430\u0439\u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u044b \u043a \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0435 \u0442\u0438\u043f\u043e\u0432. \u041a\u0430\u043a \u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435, Model \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u043b\u0441\u044f \u0432\u043e\u0432\u0441\u0435, View \u0441\u0434\u0435\u043b\u0430\u043d \u0432\u0435\u0441\u044c\u043c\u0430 \u0441\u043e\u043c\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0437-\u0437\u0430 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430, \u0430 Controller \u0441\u0434\u0435\u043b\u0430\u043d \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0437\u0430\u043c\u044b\u0441\u043b\u043e\u0432\u0430\u0442\u043e \u0447\u0435\u0440\u0435\u0437 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0432 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043a\u043b\u0430\u0441\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0430\u0447\u0438\u0441\u0442\u043e \u043b\u043e\u0436\u0430\u0442\u0441\u044f \u043f\u043e\u0434 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0431\u0438\u0437\u043d\u0435\u0441\u0430<\/p>\n

\u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c View \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0442\u0438\u043b\u0435 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c Model \u043d\u0430 TypeScript, \u0430 \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430 \u041e\u041e\u041f \u0441 \u0438\u043d\u044a\u0435\u043a\u0446\u0438\u0435\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u043c\u043e\u0436\u043d\u043e \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0434\u0435\u043d\u044c\u0433\u0438 \u043f\u0443\u0442\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0445 \u0433\u043e\u0434\u0430\u043c\u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u043d\u0430\u044e\u0442 \u0441\u0430\u043c\u044b\u0435 \u0434\u0435\u0448\u0435\u0432\u044b\u0435 \u043a\u0430\u0434\u0440\u044b \u043d\u0430 \u0440\u044b\u043d\u043a\u0435 — \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u044b<\/p>\n

Dependency Injection<\/h3>\n

\u0414\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u043d\u043e\u0433\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0438. \u041d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0441\u0442\u044b\u043c \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e \u0447\u0435\u0440\u0435\u0437 \u0438\u043d\u044a\u0435\u043a\u0446\u0438\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c InversifyJS<\/p>\n

import { injectable, inject } from \"inversify\"; import { makeObservable } from \"mobx\"; import { action, observable } from \"mobx\";  import ApiService from \"..\/..\/base\/ApiService\"; import RouterService from \"..\/..\/base\/RouterService\";  import TYPES from \"..\/..\/types\";  @injectable() export class SettingsPageService {    @observable   @inject(TYPES.apiService)   readonly apiService!: ApiService;    @observable   @inject(TYPES.routerService)   readonly routerService!: RouterService;    constructor() {     makeObservable(this);   };    ...<\/code><\/pre>\n
\u041e\u0434\u043d\u0430\u043a\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u044b \u043d\u0435 \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u044b \u043a\u0430\u043a \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 JavaScript<\/a> \u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0441\u043b\u043e\u0436\u0435\u043d \u043a \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044e, \u044f \u0431\u044b \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 Dependency Service \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0435\u0433\u043e \u0434\u043b\u044f \u0438\u043d\u044a\u0435\u043a\u0446\u0438\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/p>\n
\/\/ src\/helpers\/serviceManager.ts  export const serviceManager = new class {      _creators = new Map<string | Symbol, () => unknown>();     _instances = new Map<string | Symbol, unknown>();      registerInstance = <T = unknown>(key: string, inst: T) => {         this._instances.set(key, inst);     };      registerCreator = <T = unknown>(key: string | Symbol, ctor: () => T) => {         this._creators.set(key, ctor);     };      inject = <T = unknown>(key: string | symbol): T => {         if (this._instances.has(key)) {             const instance = this._instances.get(key);             return instance as T;         } else if (this._creators.has(key)) {             const instance = this._creators.get(key)!();             this._instances.set(key, instance);             return instance as T;         } else {             console.warn('serviceManager unknown service', key);             return null as never;         }     };      clear = () => {         this._creators.clear();         this._instances.clear();     };  };  const { registerCreator: provide, inject } = serviceManager; export { provide, inject };  export default serviceManager;<\/code><\/pre>\n
\u0424\u0430\u0439\u043b serviceManager.ts<\/strong> \u0431\u0443\u0434\u0435\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 provide<\/strong> \u0438 inject<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441 \u0438 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0438\u0442\u044c \u0438\u043d\u044a\u0435\u043a\u0446\u0438\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438. \u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043a\u0438\u0434\u0430\u0442\u044c \u0441\u043b\u043e\u0435\u043d\u0443\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u043d\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u043d\u0438 \u043c\u0430\u043b\u0435\u0439\u0448\u0435\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438<\/p>\n
\u041d\u0430\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b, \u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445. \u0418\u0445 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0432 \u043f\u0430\u043f\u043a\u0443 src\/lib\/base<\/strong><\/p>\n
    \n
  1. \n
    ApiService — \u043e\u0431\u0435\u0440\u0442\u043a\u0443 \u043f\u043e\u0434 HTTP \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443, \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u044e\u0449\u0443\u044e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441\u0435\u0441\u0441\u0438\u0438 \u0438 \u043e\u0448\u0438\u0431\u043e\u043a<\/p>\n<\/li>\n
  2. \n
    ErrorService — \u0441\u0435\u0440\u0432\u0438\u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0439<\/p>\n<\/li>\n
  3. \n
    RouterService — \u0441\u0435\u0440\u0432\u0438\u0441 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n
  4. \n
    SessionService — \u0441\u0435\u0440\u0432\u0438\u0441 \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u0435\u0441\u0441\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/p>\n<\/li>\n<\/ol>\n
    \u0414\u043b\u044f \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0441\u0442\u0438, \u044f \u043e\u0441\u0442\u0430\u0432\u043b\u044e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0434\u0440\u0435\u0432\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438\u0437 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430<\/p>\n
    <\/figcaption><\/figure>\n
    \u041d\u0430\u0447\u043d\u0435\u043c \u0441 ApiService. \u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u044f \u043d\u0430\u043a\u0438\u0434\u0430\u043b \u043a\u043b\u0430\u0441\u0441, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u043c\u0435\u0442\u043e\u0434\u044b get, post, put, patch, remove, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 HTTP \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443<\/p>\n
    \/\/ src\/lib\/base\/ApiService.ts  import { makeAutoObservable } from \"mobx\"; import { inject } from \"..\/..\/helpers\/serviceManager\";  import SessionService from \".\/SessionService\"; import ErrorService, { OfflineError } from \".\/ErrorService\";  import { API_ORIGIN, API_TOKEN } from \"..\/..\/config\";  import TYPES from \"..\/types\";  type JSON = Record<string, unknown>;  export class ApiService {    readonly sessionService = inject<SessionService>(TYPES.sessionService);   readonly errorService = inject<ErrorService>(TYPES.errorService);    constructor() {     makeAutoObservable(this);   };    private handleSearchParams = <D = JSON>(url: URL, params?: D) => {     if (params) {       for (const [key, value] of Object.entries(params)) {         if (typeof value === 'object') {           url.searchParams.set(key, JSON.stringify(value));         } else if (typeof value === 'number') {           url.searchParams.set(key, value.toString());         } else if (typeof value === 'string') {           url.searchParams.set(key, value.toString());         } else {           throw new Error(`Unknown param type ${key}`);         }       }     }   };      private handleJSON = <T = JSON>(data: string): T => {     try {       return JSON.parse(data) as T;     } catch {       return {} as T;     }   };      private request = <T = JSON, D = JSON>(     method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',     url: URL,     data?: D,   ) => new Promise<T>(async (res, rej) => {     try {       const request = await fetch(url.toString(), {         method,         headers: {           ...(this.sessionService.sessionId && ({             [API_TOKEN]: this.sessionService.sessionId,           })),           'Content-type': 'application\/json',         },         ...(data && {           body: JSON.stringify(data),         }),       });       const text = await request.text();       const json = this.handleJSON<T>(text);       this.errorService.processStatusCode(request.status);       if ('error' in json) {         rej(json);       } else {         res(json);       }     } catch (e) {       if (!window.navigator.onLine) {         e = new OfflineError();       }       this.errorService.handleError(e as Error);       rej(e);     }   });    public get = <T = JSON, D = JSON>(url: URL | string, data?: D): Promise<T> => {     const targetUrl = typeof url === 'string' ? new URL(url, API_ORIGIN) : url;     this.handleSearchParams<D>(targetUrl, data);     return this.request<T>('GET', targetUrl);   };     public remove = <T = JSON, D = JSON>(url: URL | string, data?: D): Promise<T> => {     const targetUrl = typeof url === 'string' ? new URL(url, API_ORIGIN) : url;     this.handleSearchParams<D>(targetUrl, data);     return this.request<T, D>('DELETE', targetUrl);   };     public post = <T = JSON, D = JSON>(url: URL | string, data?: D): Promise<T> => {     if (typeof url === 'string') {       return this.request<T, D>('POST', new URL(url, API_ORIGIN), data);     }     return this.request<T, D>('POST', url, data);   };       public put = <T = JSON, D = JSON>(url: URL | string, data?: D): Promise<T> => {     if (typeof url === 'string') {       return this.request<T, D>('PUT', new URL(url, API_ORIGIN), data);     }     return this.request<T, D>('PUT', url, data);   };      public patch = <T = JSON, D = JSON>(url: URL | string, data?: D): Promise<T> => {     if (typeof url === 'string') {       return this.request<T, D>('PATCH', new URL(url, API_ORIGIN), data);     }     return this.request<T, D>('PATCH', url, data);   };  };  export default ApiService;<\/code><\/pre>\n
    \u041e\u0448\u0438\u0431\u043a\u0438 \u0438\u0437 ApiService \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0422\u0430\u043a \u0436\u0435, \u043d\u0443\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u043e\u043c\u0443 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0443 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e die(), \u0435\u0441\u043b\u0438 \u0447\u0442\u043e-\u043b\u0438\u0431\u043e \u0438\u0434\u0435\u0442 \u043d\u0435 \u043f\u043e \u043f\u043b\u0430\u043d\u0443. \u0412 \u044d\u0442\u043e\u043c \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 ErrorService<\/p>\n
    \/\/ src\/lib\/base\/ErrorService.ts  import { makeAutoObservable } from \"mobx\";  import { Subject } from \"rxjs\";  class BaseError { }  const createError = (type: string): typeof BaseError =>     class extends BaseError {         type = ''         constructor() {             super();             this.type = type;         }     };  export const UnauthorizedError = createError('unauthorized-error'); export const ForbiddenError = createError('forbidden-error'); export const InternalError = createError('internal-error'); export const OfflineError = createError('offline-error');  const UNAUTHORIZED = 401; const FORBIDDEN = 403; const INTERNAL = 500; const GATEWAY = 504;   export class ErrorService {      permissionsSubject = new Subject<void>();     offlineSubject = new Subject<void>();     dieSubject = new Subject<void>();      constructor() {         makeAutoObservable(this);     };      processStatusCode = (code: number) => {         if (code === UNAUTHORIZED) {             throw new UnauthorizedError();         } else if (code === FORBIDDEN) {             throw new ForbiddenError();         } else if (code === INTERNAL) {             throw new InternalError();         } else if (code === GATEWAY) {             throw new InternalError();         }     };      handleError = (e: Error) => {         console.log('errorService handleError', e);         if (e instanceof ForbiddenError) {             this.logout();         } else if (e instanceof InternalError) {             this.die();         } else if (e instanceof UnauthorizedError) {             this.logout();         } else if (e instanceof OfflineError) {             this.offline();         } else {             this.die();         }     };      die = () => {         this.dieSubject.next();     };      offline = () => {         this.offlineSubject.next();     };      logout = async () => {         this.permissionsSubject.next();     };  };  export default ErrorService; <\/code><\/pre>\n
    ErrorService \u044d\u043c\u0438\u0442\u0438\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0447\u0435\u0440\u0435\u0437 permissionsSubject<\/strong>, offlineSubject<\/strong>, dieSubject<\/strong>. \u041c\u044b \u043f\u043e\u0434\u043f\u0438\u0448\u0435\u043c\u0441\u044f \u043d\u0430 \u043d\u0438\u0445, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0440\u043e\u0443\u0442 \u0438, \u043f\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0441\u0435\u0441\u0441\u0438\u044e<\/p>\n
    \/\/ src\/lib\/base\/RouterService.ts  import { makeAutoObservable } from \"mobx\";  import {    Action,   Blocker,   BrowserHistory,   Listener,   Location,   State,   To,   createMemoryHistory } from \"history\";  const browserHistory = createMemoryHistory();  export class RouterService implements BrowserHistory {    previousPath = '\/';    location: Location = browserHistory.location;   action: Action = browserHistory.action;    constructor() {     makeAutoObservable(this)   }    updateState() {     const { location, action } = browserHistory;     this.previousPath = this.location?.pathname || '\/';     this.location = location;     this.action = action;   }    createHref(to: To) {     const result = browserHistory.createHref(to);     this.updateState();     return result;   }    push(to: To, state?: State) {     const result = browserHistory.push(to, state);     this.updateState();     return result;   }    replace(to: To, state?: State) {     const result = browserHistory.replace(to, state);     this.updateState();     return result;   }    go(delta: number) {     const result = browserHistory.go(delta);     this.updateState();     return result;   }    back() {     const result = browserHistory.back();     this.updateState();     return result;   }    forward() {     const result = browserHistory.forward();     this.updateState();     return result;   }    listen(listener: Listener) {     const result = browserHistory.listen(listener);     this.updateState();     return result;   }    block(blocker: Blocker) {     const result = browserHistory.block(blocker);     this.updateState();     return result;   } };  export default RouterService; <\/code><\/pre>\n
    RouterService \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043e\u0431\u0435\u0440\u0442\u043a\u0443 \u043d\u0430\u0434 history<\/a> \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438. \u041f\u0440\u0438\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0447\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 provide<\/strong>\/inject<\/strong> \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0433\u0440\u0430\u0444 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438 \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u0443\u043c\u0430\u0442\u044c \u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432<\/p>\n
    \/\/ src\/helpers\/sessionService.ts  import { makeAutoObservable } from \"mobx\";  import createLsManager from \"..\/..\/utils\/createLsManager\";  const storageManager = createLsManager('SESSION_ID');  export class SessionService {    sessionId = storageManager.getValue()    constructor() {     makeAutoObservable(this);   };    dispose = () => {     storageManager.setValue('');     this.sessionId = '';   };    setSessionId = (sessionId: string, keep = true) => {     if (keep) {       storageManager.setValue(sessionId);     }     this.sessionId = sessionId;   };  };  export default SessionService; <\/code><\/pre>\n
    SessionService \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c JWT \u0442\u043e\u043a\u0435\u043d<\/a>, \u0444\u043b\u0430\u0433 keep \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u0432 localStorage \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u0435\u0441\u0441\u0438\u0438 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/p>\n
    \u0421\u043e\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u044b<\/h2>\n
    \u0412\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0440\u0438 \u0444\u0430\u0439\u043b\u0430: types.ts<\/strong> — \u0434\u043b\u044f \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u044b\u0445 \u043f\u0441\u0435\u0432\u0434\u043e\u043d\u0438\u043c\u043e\u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432, config.ts<\/strong> — \u0434\u043b\u044f \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0444\u0430\u0431\u0440\u0438\u043a \u0438 ioc.ts<\/strong> — \u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0438\u043d\u0441\u0442\u0430\u043d\u0446\u0438\u044f\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432. \u041a\u043e\u0434 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439<\/p>\n
    \/\/ src\/lib\/types.ts  const baseServices = {     routerService: Symbol.for('routerService'),     sessionService: Symbol.for('sessionService'),     errorService: Symbol.for('errorService'),     apiService: Symbol.for('apiService'), };  const viewServices = {     personService: Symbol.for('personService'), };  export const TYPES = {     ...baseServices,     ...viewServices, };  export default TYPES;<\/code><\/pre>\n
    \u0424\u0430\u0439\u043b config.ts <\/strong>\u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432 \u0438 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0432 ioc.ts<\/strong> \u0434\u043b\u044f \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u0430\u0431\u0440\u0438\u043a \u0441 \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u044b\u043c\u0438 \u043f\u0441\u0435\u0432\u0434\u043e\u043d\u0438\u043c\u0430\u043c\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432<\/p>\n
    \/\/ src\/lib.config.ts  import { provide } from '..\/helpers\/serviceManager'  import RouterService from \".\/base\/RouterService\"; import SessionService from \".\/base\/SessionService\"; import ErrorService from \".\/base\/ErrorService\"; import ApiService from \".\/base\/ApiService\";  import MockService from '.\/view\/PersonService';  import TYPES from \".\/types\";  provide(TYPES.routerService, () => new RouterService()); provide(TYPES.sessionService, () => new SessionService()); provide(TYPES.errorService, () => new ErrorService()); provide(TYPES.apiService, () => new ApiService());  provide(TYPES.personService, () => new PersonService()); <\/code><\/pre>\n
    \u0424\u0430\u0439\u043b ioc.ts <\/strong>\u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0438\u0435 \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430 \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0447\u0435\u0440\u0435\u0437 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0446\u0438\u043a\u043b\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438. \u042d\u0442\u043e\u0442 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c AuthService (\u0432 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u043c auth0.com<\/a>), \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 SessionService, \u0430 SessionService \u043e\u0442 AuthService <\/p>\n
    \/\/ src\/lib\/ioc.ts  import { inject } from '..\/helpers\/serviceManager';  import RouterService from \".\/base\/RouterService\"; import SessionService from \".\/base\/SessionService\"; import ErrorService from \".\/base\/ErrorService\"; import ApiService from \".\/base\/ApiService\";  import PersonService from '.\/view\/PersonService';  import { DENIED_PAGE } from \"..\/config\"; import { ERROR_PAGE } from \"..\/config\"; import { OFFLINE_PAGE } from \"..\/config\";  import \".\/config\"  import TYPES from \".\/types\";  const systemServices = {     routerService: inject<RouterService>(TYPES.routerService),     sessionService: inject<SessionService>(TYPES.sessionService),     errorService: inject<ErrorService>(TYPES.errorService),     apiService: inject<ApiService>(TYPES.apiService), };  const appServices = {     personService: inject<PersonService>(TYPES.personService), };  export const ioc = {     ...systemServices,     ...appServices, };  ioc.errorService.permissionsSubject.subscribe(() => {     ioc.routerService.push(DENIED_PAGE); });  ioc.errorService.offlineSubject.subscribe(() => {     ioc.routerService.push(OFFLINE_PAGE); });  ioc.errorService.dieSubject.subscribe(() => {     ioc.routerService.push(ERROR_PAGE); });  ioc.errorService.permissionsSubject.subscribe(() => {     ioc.sessionService.setSessionId(\"\", true); });  window.addEventListener('unhandledrejection', () => ioc.errorService.die()); window.addEventListener('error', () => ioc.errorService.die());  (window as any).ioc = ioc;  export default ioc; <\/code><\/pre>\n
    \u0421\u0438\u043d\u0433\u043b\u0442\u043e\u043d ioc<\/strong> \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e TypeScript, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0442\u0438\u043f\u043e\u0432 \u043f\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e. \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e, ioc<\/strong> \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 window, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0443 \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0435\u0437 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u043a\u043e\u0434\u0443<\/p>\n
    \u0421\u0435\u0440\u0432\u0438\u0441 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/h2>\n
    \u0414\u0430\u043b\u0435\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u0441 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u043e\u0439. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043a\u0430\u0434\u0435\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 PersonService<\/strong>, \u0441\u0435\u0440\u0432\u0438\u0441, \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u0432\u044b\u0432\u043e\u0434 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0438\u0437 CRUD \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430<\/p>\n
    \/\/ src\/lib\/view\/PersonService.ts  import { makeAutoObservable } from \"mobx\";  import {   ListHandlerPagination,   ListHandlerSortModel, } from \"..\/..\/model\";  import IPerson from \"..\/..\/model\/IPerson\";  import ApiService from \"..\/base\/ApiService\"; import RouterService from \"..\/base\/RouterService\";  import TYPES from \"..\/types\";  export class PersonService {      readonly routerService = inject<RouterService>(TYPES.routerService);   readonly apiService = inject<ApiService>(TYPES.apiService);    constructor() {     makeAutoObservable(this);   }    async list(     filters: Record<string, unknown>,     pagination: ListHandlerPagination,     sort: ListHandlerSortModel   ) {       let rows = await this.apiService.get<IPerson[]>(`crud`, {       filters,       sort,     });     const { length: total } = rows;     rows = rows.slice(       pagination.offset,       pagination.limit + pagination.offset     );     return {       rows,       total,     };   };    one(id: string): Promise<IPerson | null> {     if (id === 'create') {       return Promise.resolve(null);     } else {       return this.apiService.get<IPerson>(`persons\/${id}`);     }   };    save(person: IPerson) {     return this.apiService.put(`crud\/${person.id}`, person);   }    async create(rawPerson: IPerson) {     const person = this.apiService.post<IPerson>(`crud`, rawPerson);     this.routerService.push(`\/persons\/${person.id}`);     return person;   }    remove(person: IPerson) {     return this.apiService.remove(`crud\/${person.id}`);   };  };  export default PersonService;<\/code><\/pre>\n
    \u041c\u0435\u0442\u043e\u0434 list<\/strong> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0438\u0442\u044c \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044e \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u041c\u0435\u0442\u043e\u0434 save <\/strong>\u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0441\u0432\u0435\u0436\u0435\u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0431\u0435\u0437 id-\u0448\u043d\u0438\u043a\u0430 \u0438 \u043f\u0435\u0440\u0435\u0430\u0434\u0440\u0435\u0441\u0443\u0435\u0442 ui \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. \u041c\u0435\u0442\u043e\u0434 one <\/strong>\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e id-\u0448\u043d\u0438\u043a\u0443<\/p>\n
    \u0415\u0441\u043b\u0438 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0430, ApiService \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0441\u044f \u0432 ErrorService \u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0435\u0451 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 \u043c\u043e\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0433\u043e \u043f\u0430\u0434\u0435\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430<\/p>\n
    \u0421\u0435\u0440\u0432\u0438\u0441 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0435 \u0442\u0430\u043a\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u043a\u0430\u043a \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u0443, \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043b\u043e\u0436\u0438\u0442\u044c \u0440\u0443\u0442\u0438\u043d\u0443 \u043d\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432<\/p>\n
    \u041f\u043e\u0447\u0435\u043c\u0443 \u0432\u0430\u043c \u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c \u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u0435<\/h2>\n
    \u041f\u043e \u0445\u043e\u0440\u043e\u0448\u0435\u043c\u0443, \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044e \u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u0432\u0432\u043e\u0434\u0430 \u0438\u0437 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0441 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u043e\u0439, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0434\u043e\u043b\u0436\u0435\u043d \u043b\u0435\u0436\u0430\u0442\u044c \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0418\u043c\u0435\u043d\u043d\u043e \u0442\u0443\u0442 \u0432\u0430\u043c \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440 \u0444\u043e\u0440\u043c \u0441 \u043a\u043e\u043d\u0444\u0438\u0433\u0430\u043c\u0438)<\/p>\n
    \/\/ src\/pages\/PersonList.tsx  import { useRef } from 'react';  import {   List,   FieldType,   IColumn,   IListApi,   ColumnType, } from '..\/components\/ListEngine';  import {   IField, } from '..\/components\/OneEngine';  import IPerson from '..\/model\/IPerson';  import ioc from '..\/lib\/ioc';  const filters: IField[] = [   {     type: FieldType.Text,     name: 'firstName',     title: 'First name',   },   {     type: FieldType.Text,     name: 'lastName',     title: 'Last name',   } ];  const columns: IColumn[] = [   {     type: ColumnType.Text,     field: 'id',     headerName: 'ID',     width: 'max(calc(100vw - 650px), 200px)',   },   {     type: ColumnType.Text,     field: 'firstName',     headerName: 'First name',     width: '200px',   },   {     type: ColumnType.Text,     field: 'lastName',     headerName: 'Last name',     width: '200px',   },   {     type: ColumnType.Action,     headerName: 'Actions',     sortable: false,     width: '150px',   }, ];  export const PersonList = () => {    const apiRef = useRef<IListApi>(null);    const handleRemove = async (person: IPerson) => {     await ioc.personService.remove(person);     await apiRef.current?.reload();   };    const handleClick = (person: IPerson) => {     ioc.routerService.push(`\/persons\/${person.id}`);   };    const handleCreate = () => {     ioc.routerService.push(`\/persons\/create`);   };    return (     <List       ref={apiRef}       filters={filters}       columns={columns}       handler={ioc.personService.list}       onCreate={handleCreate}       onRemove={handleRemove}       onClick={handleClick}     \/>   ); };  export default PersonList; <\/code><\/pre>\n
    \u0414\u0430\u043d\u043d\u044b\u0435 \u0432 \u0441\u043f\u0438\u0441\u043e\u0447\u043d\u0443\u044e \u0444\u043e\u0440\u043c\u0443 \u0438 \u0444\u043e\u0440\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u043f\u0441\u0443 handler<\/strong> \u0443 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u0430 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b list<\/strong>, one. <\/strong>\u042d\u0442\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0431\u0435\u0441\u0448\u043e\u0432\u043d\u0443\u044e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u0418\u0437 \u043f\u043b\u044e\u0441\u043e\u0432, \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0440\u0430\u0434\u0438\u043a\u0430\u043b\u044c\u043d\u043e \u0441\u043d\u0438\u0436\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u044b \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0435\u0434\u0438\u043d\u043e\u043c \u0444\u0438\u0440\u043c\u0435\u043d\u043d\u043e\u043c \u0441\u0442\u0438\u043b\u0435<\/p>\n
    \/\/ src\/pages\/PersonOne.tsx  import { useState } from 'react';  import {   One,   IField,   Breadcrumbs,   FieldType, } from '..\/components\/OneEngine';  import IPerson from '..\/model\/IPerson';  import ioc from '..\/lib\/ioc';  const fields: IField[] = [   {     name: 'firstName',     type: FieldType.Text,     title: 'First name',     description: 'Required',   },   {     name: 'lastName',     type: FieldType.Text,     title: 'Last name',     description: 'Required',   }, ];  interface IPersonOneProps {   id: string; }  export const PersonOne = ({   id, }: IPersonOneProps) => {    const [data, setData] = useState<IPerson | null>(null);    const handleSave = async () => {     if (id === 'create') {       await ioc.personService.create(data);     } else {       await ioc.personService.save(data);     }   };    const handleChange = (data: IPerson) => {     setData(data);   };    return (     <>       <Breadcrumbs         disabled={!data}         onSave={handleSave}       \/>       <One         fields={fields}         handler={() => ioc.personService.one(id)}         change={handleChange}       \/>     <\/>   ); };  export default PersonOne; <\/code><\/pre>\n
    \u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435)<\/h3>\n
    \u041d\u0435 \u0434\u0443\u043c\u0430\u043b, \u0447\u0442\u043e \u0432\u044b \u0434\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430.<\/p>\n<\/div>\n<\/div>\n<\/div>\n
    <\/div>\n<\/div>\n
      
     \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/post\/669696\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    <\/div>\n
    \n
    \n
    \n
    \n
    \u0421\u0438\u0434\u0435\u043b \u044f \u043a\u0430\u043a-\u0442\u043e \u0432\u0435\u0447\u0435\u0440\u043e\u043c \u0441 \u043a\u0440\u0443\u0436\u043a\u043e\u0439 \u0447\u0430\u044f \u0438 \u0432\u0434\u0440\u0443\u0433, \u043d\u0438 \u0441 \u0442\u043e\u0433\u043e \u043d\u0435 \u0441 \u0441\u0435\u0433\u043e, \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u043f\u043e\u0447\u0442\u0443 \u043e \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u043d\u0430 \u0441\u0442\u0430\u0442\u044c\u044e <\/a>\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f<\/p>\n
    <\/figcaption><\/figure>\n
    \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0449\u0435 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0442\u0438\u043b\u0435. \u041e\u0441\u043e\u0431\u043e \u0432\u044b\u0434\u0435\u043b\u0438\u043b\u0441\u044f \u0432 \u044d\u0442\u043e\u043c \u0434\u0435\u043b\u0435 React, \u043f\u043e\u0441\u043b\u0435 \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0445\u0443\u043a\u043e\u0432 \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0430\u043b \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u043c \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u043a \u043c\u043e\u0434\u0435\u0440\u043d\u0438\u0437\u0430\u0446\u0438\u0438<\/p>\n
    \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043e\u0442\u043b\u0438\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0432\u044b\u0431\u043e\u0440 \u043f\u0440\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 UI \u043e\u0442 OpenSource \u0438 \u043a\u043e\u0440\u043f\u043e\u0440\u0430\u0446\u0438\u0439. MUI<\/a> \u043e\u0442 Google, BaseWeb<\/a> \u043e\u0442 Uber, Fluent UI (Fabric)<\/a> \u043e\u0442 Microsoft, Chakra UI<\/a> \u043e\u0442 \u043a\u043e\u043c\u043c\u044c\u044e\u043d\u0438\u0442\u0438 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435<\/p>\n
    \u0421\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043b\u0443\u0447\u0448\u0435 \u043a\u0440\u0430\u0439\u043d\u0435 \u0442\u0440\u0443\u0434\u043e\u0437\u0430\u0442\u0440\u0430\u0442\u043d\u043e \u0438 \u0441\u043b\u043e\u0436\u043d\u043e \u043a \u043f\u043e\u0438\u0441\u043a\u0443 \u043a\u0430\u0434\u0440\u043e\u0432. \u0414\u0443\u043c\u0430\u044e, \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0441\u043e\u0447\u0435\u0442\u0430\u0442\u044c \u0434\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0441\u0442\u0438\u043b\u0435 \u041e\u041e\u041f \u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439<\/p>\n
    \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 JavaScript \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432<\/h2>\n
    Backbone, Marionette \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u043a\u0440\u0438 \u0440\u0430\u0437\u043c\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0442\u043e\u043d\u043a\u0438\u043c \u0441\u043b\u043e\u0435\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e \u043c\u0435\u0442\u043e\u0434\u0430\u043c \u043a\u043b\u0430\u0441\u0441\u0430 \u0438 \u043a\u0440\u0430\u0439\u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u044b \u043a \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0435 \u0442\u0438\u043f\u043e\u0432. \u041a\u0430\u043a \u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435, Model \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u043b\u0441\u044f \u0432\u043e\u0432\u0441\u0435, View \u0441\u0434\u0435\u043b\u0430\u043d \u0432\u0435\u0441\u044c\u043c\u0430 \u0441\u043e\u043c\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0437-\u0437\u0430 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430, \u0430 Controller \u0441\u0434\u0435\u043b\u0430\u043d \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0437\u0430\u043c\u044b\u0441\u043b\u043e\u0432\u0430\u0442\u043e \u0447\u0435\u0440\u0435\u0437 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0432 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043a\u043b\u0430\u0441\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0430\u0447\u0438\u0441\u0442\u043e \u043b\u043e\u0436\u0430\u0442\u0441\u044f \u043f\u043e\u0434 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0431\u0438\u0437\u043d\u0435\u0441\u0430<\/p>\n
    \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c View \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0442\u0438\u043b\u0435 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c Model \u043d\u0430 TypeScript, \u0430 \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430 \u041e\u041e\u041f \u0441 \u0438\u043d\u044a\u0435\u043a\u0446\u0438\u0435\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u043c\u043e\u0436\u043d\u043e \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0434\u0435\u043d\u044c\u0433\u0438 \u043f\u0443\u0442\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0445 \u0433\u043e\u0434\u0430\u043c\u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u043d\u0430\u044e\u0442 \u0441\u0430\u043c\u044b\u0435 \u0434\u0435\u0448\u0435\u0432\u044b\u0435 \u043a\u0430\u0434\u0440\u044b \u043d\u0430 \u0440\u044b\u043d\u043a\u0435 — \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u044b<\/p>\n
    Dependency Injection<\/h3>\n
    \u0414\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u043d\u043e\u0433\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0438. \u041d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0441\u0442\u044b\u043c \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e \u0447\u0435\u0440\u0435\u0437 \u0438\u043d\u044a\u0435\u043a\u0446\u0438\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c InversifyJS<\/p>\n
    import { injectable, inject } from \"inversify\"; import { makeObservable } from \"mobx\"; import { action, observable } from \"mobx\";  import ApiService from \"..\/..\/base\/ApiService\"; import RouterService from \"..\/..\/base\/RouterService\";  import TYPES from \"..\/..\/types\";  @injectable() export class SettingsPageService {    @observable   @inject(TYPES.apiService)   readonly apiService!: ApiService;    @observable   @inject(TYPES.routerService)   readonly routerService!: RouterService;    constructor() {     makeObservable(this);   };    ...<\/code><\/pre>\n
    \u041e\u0434\u043d\u0430\u043a\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u044b \u043d\u0435 \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u044b \u043a\u0430\u043a \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 JavaScript<\/a> \u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0441\u043b\u043e\u0436\u0435\u043d \u043a \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044e, \u044f \u0431\u044b \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 Dependency Service \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0435\u0433\u043e \u0434\u043b\u044f \u0438\u043d\u044a\u0435\u043a\u0446\u0438\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/p>\n
    \/\/ src\/helpers\/serviceManager.ts  export const serviceManager = new class {      _creators = new Map<string | Symbol, () => unknown>();     _instances = new Map<string | Symbol, unknown>();      registerInstance = <T = unknown>(key: string, inst: T) => {         this._instances.set(key, inst);     };      registerCreator = <T = unknown>(key: string | Symbol, ctor: () => T) => {         this._creators.set(key, ctor);     };      inject = <T = unknown>(key: string | symbol): T => {         if (this._instances.has(key)) {             const instance = this._instances.get(key);             return instance as T;         } else if (this._creators.has(key)) {             const instance = this._creators.get(key)!();             this._instances.set(key, instance);             return instance as T;         } else {             console.warn('serviceManager unknown service', key);             return null as never;         }     };      clear = () => {         this._creators.clear();         this._instances.clear();     };  };  const { registerCreator: provide, inject } = serviceManager; export { provide, inject };  export default serviceManager;<\/code><\/pre>\n
    \u0424\u0430\u0439\u043b serviceManager.ts<\/strong> \u0431\u0443\u0434\u0435\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 provide<\/strong> \u0438 inject<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441 \u0438 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0438\u0442\u044c \u0438\u043d\u044a\u0435\u043a\u0446\u0438\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438. \u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043a\u0438\u0434\u0430\u0442\u044c \u0441\u043b\u043e\u0435\u043d\u0443\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u043d\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u043d\u0438 \u043c\u0430\u043b\u0435\u0439\u0448\u0435\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438<\/p>\n
    \u041d\u0430\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b, \u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445. \u0418\u0445 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0432 \u043f\u0430\u043f\u043a\u0443 src\/lib\/base<\/strong><\/p>\n
      \n
    1. \n
      ApiService — \u043e\u0431\u0435\u0440\u0442\u043a\u0443 \u043f\u043e\u0434 HTTP \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443, \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u044e\u0449\u0443\u044e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441\u0435\u0441\u0441\u0438\u0438 \u0438 \u043e\u0448\u0438\u0431\u043e\u043a<\/p>\n<\/li>\n
    2. \n
      ErrorService — \u0441\u0435\u0440\u0432\u0438\u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0439<\/p>\n<\/li>\n
    3. \n
      RouterService — \u0441\u0435\u0440\u0432\u0438\u0441 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n
    4. \n
      SessionService — \u0441\u0435\u0440\u0432\u0438\u0441 \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u0435\u0441\u0441\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/p>\n<\/li>\n<\/ol>\n
      \u0414\u043b\u044f \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0441\u0442\u0438, \u044f \u043e\u0441\u0442\u0430\u0432\u043b\u044e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0434\u0440\u0435\u0432\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438\u0437 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430<\/p>\n
      <\/figcaption><\/figure>\n
      \u041d\u0430\u0447\u043d\u0435\u043c \u0441 ApiService. \u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u044f \u043d\u0430\u043a\u0438\u0434\u0430\u043b \u043a\u043b\u0430\u0441\u0441, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u043c\u0435\u0442\u043e\u0434\u044b get, post, put, patch, remove, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 HTTP \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443<\/p>\n
      \/\/ src\/lib\/base\/ApiService.ts  import { makeAutoObservable } from \"mobx\"; import { inject } from \"..\/..\/helpers\/serviceManager\";  import SessionService from \".\/SessionService\"; import ErrorService, { OfflineError } from \".\/ErrorService\";  import { API_ORIGIN, API_TOKEN } from \"..\/..\/config\";  import TYPES from \"..\/types\";  type JSON = Record<string, unknown>;  export class ApiService {    readonly sessionService = inject<SessionService>(TYPES.sessionService);   readonly errorService = inject<ErrorService>(TYPES.errorService);    constructor() {     makeAutoObservable(this);   };    private handleSearchParams = <D = JSON>(url: URL, params?: D) => {     if (params) {       for (const [key, value] of Object.entries(params)) {         if (typeof value === 'object') {           url.searchParams.set(key, JSON.stringify(value));         } else if (typeof value === 'number') {           url.searchParams.set(key, value.toString());         } else if (typeof value === 'string') {           url.searchParams.set(key, value.toString());         } else {           throw new Error(`Unknown param type ${key}`);         }       }     }   };      private handleJSON = <T = JSON>(data: string): T => {     try {       return JSON.parse(data) as T;     } catch {       return {} as T;     }   };      private request = <T = JSON, D = JSON>(     method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',     url: URL,     data?: D,   ) => new Promise<T>(async (res, rej) => {     try {       const request = await fetch(url.toString(), {         method,         headers: {           ...(this.sessionService.sessionId && ({             [API_TOKEN]: this.sessionService.sessionId,           })),           'Content-type': 'application\/json',         },         ...(data && {           body: JSON.stringify(data),         }),       });       const text = await request.text();       const json = this.handleJSON<T>(text);       this.errorService.processStatusCode(request.status);       if ('error' in json) {         rej(json);       } else {         res(json);       }     } catch (e) {       if (!window.navigator.onLine) {         e = new OfflineError();       }       this.errorService.handleError(e as Error);       rej(e);     }   });    public get = <T = JSON, D = JSON>(url: URL | string, data?: D): Promise<T> => {     const targetUrl = typeof url === 'string' ? new URL(url, API_ORIGIN) : url;     this.handleSearchParams<D>(targetUrl, data);     return this.request<T>('GET', targetUrl);   };     public remove = <T = JSON, D = JSON>(url: URL | string, data?: D): Promise<T> => {     const targetUrl = typeof url === 'string' ? new URL(url, API_ORIGIN) : url;     this.handleSearchParams<D>(targetUrl, data);     return this.request<T, D>('DELETE', targetUrl);   };     public post = <T = JSON, D = JSON>(url: URL | string, data?: D): Promise<T> => {     if (typeof url === 'string') {       return this.request<T, D>('POST', new URL(url, API_ORIGIN), data);     }     return this.request<T, D>('POST', url, data);   };       public put = <T = JSON, D = JSON>(url: URL | string, data?: D): Promise<T> => {     if (typeof url === 'string') {       return this.request<T, D>('PUT', new URL(url, API_ORIGIN), data);     }     return this.request<T, D>('PUT', url, data);   };      public patch = <T = JSON, D = JSON>(url: URL | string, data?: D): Promise<T> => {     if (typeof url === 'string') {       return this.request<T, D>('PATCH', new URL(url, API_ORIGIN), data);     }     return this.request<T, D>('PATCH', url, data);   };  };  export default ApiService;<\/code><\/pre>\n
      \u041e\u0448\u0438\u0431\u043a\u0438 \u0438\u0437 ApiService \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0422\u0430\u043a \u0436\u0435, \u043d\u0443\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u043e\u043c\u0443 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0443 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e die(), \u0435\u0441\u043b\u0438 \u0447\u0442\u043e-\u043b\u0438\u0431\u043e \u0438\u0434\u0435\u0442 \u043d\u0435 \u043f\u043e \u043f\u043b\u0430\u043d\u0443. \u0412 \u044d\u0442\u043e\u043c \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 ErrorService<\/p>\n
      \/\/ src\/lib\/base\/ErrorService.ts  import { makeAutoObservable } from \"mobx\";  import { Subject } from \"rxjs\";  class BaseError { }  const createError = (type: string): typeof BaseError =>     class extends BaseError {         type = ''         constructor() {             super();             this.type = type;         }     };  export const UnauthorizedError = createError('unauthorized-error'); export const ForbiddenError = createError('forbidden-error'); export const InternalError = createError('internal-error'); export const OfflineError = createError('offline-error');  const UNAUTHORIZED = 401; const FORBIDDEN = 403; const INTERNAL = 500; const GATEWAY = 504;   export class ErrorService {      permissionsSubject = new Subject<void>();     offlineSubject = new Subject<void>();     dieSubject = new Subject<void>();      constructor() {         makeAutoObservable(this);     };      processStatusCode = (code: number) => {         if (code === UNAUTHORIZED) {             throw new UnauthorizedError();         } else if (code === FORBIDDEN) {             throw new ForbiddenError();         } else if (code === INTERNAL) {             throw new InternalError();         } else if (code === GATEWAY) {             throw new InternalError();         }     };      handleError = (e: Error) => {         console.log('errorService handleError', e);         if (e instanceof ForbiddenError) {             this.logout();         } else if (e instanceof InternalError) {             this.die();         } else if (e instanceof UnauthorizedError) {             this.logout();         } else if (e instanceof OfflineError) {             this.offline();         } else {             this.die();         }     };      die = ()<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-334165","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/334165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=334165"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/334165\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=334165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=334165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=334165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}