КомпозицияЧестно говоря, все очень плохо. У нас отсутствует возможность композиции фич над примитивом состояния практически во всех реактивных библиотеках.
Простой пример. Можно ли написать библиотеку, которая будет сохранять и восстанавливать данные localStorage для какого-то реакт хука? Да? Вы не поняли, я прошу не написать такой хук, у меня уже есть какой-то хук из UI-kit'а, как мне заперсистеть его данные? Внезапно, такая простая задача не решается вовсе, или решается через доп состояния и лишние реренды \ глитчи синхронизации между ними.
const [persistedState, setPersistedState] = useLocalStorage('KEY')
const [state, setState] = useMyComponentState({ initState: persistedState })
useEffect(() => { setPersistedState(state) }, [state])(справедливости ради, вы можете вместо useEffect переназначить setState, но это в данном конкретном случае, иногда модель только отдает данные, но не принимает)
Первое срабатывание useEffect будет в никуда, но это не проблема. Проблема - то что не все такие хуки принимают initState.
Ну ладно, а как теперь валидацию сверху накрутить? Такой параметр библиотека уже не принимает. Привет третее состояние и еще эффекты! Уфф...
Что же делать? Нужны заранее подготовленные интерфейсы расширения, которые позволяют внедрять системную логику в состояние, которое уже потом используется логикой доменной. В каком-нибудь MobX при использовании классов вы можете применять декораторы, но они не стандартизированны...
В реатоме, как вы понимаете, эта проблема уже решена. У нас есть апи операторов, котое позволяет после создания состояния \ экшена навесить что-то сверху. А каждый оператор, благодаря открытости внутренней схемы каждого атома, может добавить что нужно.
Не всегда, конечно, получается сделать все абсолютно модульно. Но вот хороший пример, у нас есть
withCache, который позволяет кешировать данные асинхронных запросов с большим набором опций и настроек. В какой-то момент потребовалась возможность персистеть этот кеш. А персистеть куда? У реатома уже есть адаптеры к: localStorage, indexedDB, BroadcastChannel (для воркеров или табов), а в будущем будет для AsyncLocalStorage (react-native) и другие. Все они сделаны с одним интерфейсом расширения и это позволило просто добавить в
withCache опцию
withPersist, которая принимает и передает нужно расширение нужному атому. В других библиотеках или собственных реализациях вам бы пришлось перепахивать огромную кучу кода, дублируя его или меняя его интерфейсы. У нас же все уже рассчитано :)
Вот, кстати, очень интересная модель для знакомства с фичами реатома: код. Все "with*" - это операторы доп фич над создаваемой базовой сущностью, которые могут быть использованы в разных местах и фичах без проблем. Но и сама по себе модель очень интересна: фильтры храняться в урле, а пагинация сбрасывается при смене строки поиска. Попробуйте реализовать эту простую логику на других библиотеках и удивитесь как много кода это требует и какие потенциальные баги несет.
Кстати, эта модель, без какого-либо изменения кода, прекрасно работает как в React, так и во Vue, попробуйте
😏
![Frontender's notes [ru] Telegram Channel](/avatar/1306/1306975317.jpg)
