В прошлый раз я писал про createAtomSubscriber и рассказывал про его чрезвычайную полезность. Предлагаю написать примитив Subscriber для реактивной подписки/отписки/переподписки на источники данных. Начнем с примера использования подобной конструкции. Представим, что у нас есть функция receiveData, которая генерирует данные, после передачи ей текстового id и реактивная переменную $id. С помощью Subscriber создадим реактивную подписку. Когда getId будет возвращать значение отличное от undefined и subscriber.data будет под наблюдением - у нас запустится receiveData и, с помощью push, мы будет сохранять последнее полученное значение....

В библиотеке mobx есть очень интересный примитив атом, который создается через createAtom. С его помощью можно создавать очень интересные конструкции и вообще построить чуть ли не всю архитектуру приложения. Что нам говорит документация: `createAtom` {🚀} Usage: `createAtom(name, onBecomeObserved?, onBecomeUnobserved?)` Creates your own observable data structure and hooks it up to MobX. Used internally by all observable data types. Atom exposes two `report` methods to notify MobX with when: - `reportObserved()`: the atom has become observed, and should be considered part of the dependency tree of the current derivation....

Сегодня хочется немного рассказать про собственную наработку https://github.com/lexich/async-paginator Это небольшая библиотека, которая позволяет обрабатывать коллекции данных, используя асинхронные итераторы. При этом доступна гибкая настройка количества одновременного запуска задач (можно запустить сразу все или разбить на группы). import { paginatorUnordered, paginator } from 'async-paginator'; const sleep = (delay: number) => new Promise<void>((resolve) => setTimeout(resolve, delay)); // for ordering use `paginator` instead of paginatorUnordered const paginate = paginatorUnordered([1, 2, 3, 4, 5, 6, 7, 8], async (num) => { if (num % 2 === 0) { await sleep(10); // timeout 10ms } return num * 10; }, { offset: 1, chunks: 2, mode: 'chunks', }); const result: number[] = []; for await (const item of paginate) { if (!...

Cегодня хочется поговорить о брендированных типах в typescript. Для начала, представим, что у нас есть функция для конвертации валют. const usdToEur = (usdAmount: number, rate = 0.92) => usdAmount * rate; usdToEur(100); // === 92 eur Давайте немного улучшим ее, введя типы USD и EUR, чтобы не только название функции и коментарии к ней подсказывали нам о ее предназначении. type USD = number; type EUR = number; const usdToEur = (usdAmount: USD, rate = 0....

В продолжение вчерашней темы, про миграцию на mobx резонно возникает вопрос, а зачем вообще мигрировать на что-то, если есть redux, context api, useReducer и всякие подобные решения на которых строится сейчас React разработка. export const AppContext = createContext({}); export const AppContextProvider: FC = ({ children }) => { const [user, setUser] = useState<IUser>(undefined); const [profile, setProfile] = useState<IProfile>(undefined); const setUserId = (id: string) => loadUser(id).then(setUser); useEffect(() => { if (user) { loadProfile(user)....