kubk

interface Observer<T> {
    next(value: T)
    complete()
    error(error: unknown)
}

class Observable<T> {
    constructor(public subscribe: (observer: Observer<T>) => void) {}

    map(mapper: (x: T) => T): Observable<T> {

kubk

// RxJS - FRP
const increment = new Subject<void>();
const decrement = new Subject<void>();
const add = new Subject<number>();

type State = number;

const count$ = merge(
  increment.pipe(mapTo((state: State) => state + 1))
  decrement.pipe(mapTo((state: State) => state - 1)),

kubk

const store = makeAutoObservable({
  shop: {
    taxPercent: 8,
    items: [
      { name: 'apple', value: 1.20 },
      { name: 'orange', value: 0.95 },
    ]
  },
  get subtotal() {
    return this.shop.items.reduce((acc, item) => acc + item.value, 0);

kubk

import { assert } from "ts-essentials";

export class Container {
  private services = new Map<string, object>();
  private factories = new Map<string, (container: Container) => object>();

  set(key: string, factory: (container: Container) => object) {
    this.factories.set(key, factory);
  }

kubk

class ListStore<T> {
  isLoading = false;
  list: T[] = [];

  constructor(loadList: () => Promise<T[]>) {
    makeAutoObservable(this)
  }

  loadList() {
    this.isLoading = true;

kubk

Ссылки:
 - Лишний ререндер: https://codesandbox.io/s/usecontext-problem-b6evb
 - Переизобретают Mobx с массой ограничений: https://habr.com/ru/post/546124/
 - Разработчики из Atlassian не смогли переписать react-beautiful-dnd с Redux на контекст из-за проблем с перформансом: https://github.com/atlassian/react-beautiful-dnd/issues/1576#issuecomment-549643226

kubk

class UsersStore {
  isLoaded = false;
  users = [];

  constructor() {
    makeAutoObservable(this)
  }
  
  loadUsers() {
    if (this.isLoaded) {

kubk

export class PlayerStore {
  song?: Song;
  isPlaying = false;

  constructor() {
    makeAutoObservable(this);
  }

  playSong(song: Song) {
    this.song = song;

kubk

# Fix inotify issue: https://stackoverflow.com/a/56156015

kubk

import { TimeTrackerStore } from './time-tracker-store';
import { action, makeAutoObservable } from 'mobx';

class Counter {
  value = 0;
  intervalId?: NodeJS.Timer;

  constructor() {
    makeAutoObservable(this);
  }