Comments 12
А почему просто не использовать классику?
import { makeAutpObservable } from "mobx";
class SomeState {
fetching = false;
error = null;
item: IItem = null;
constuctor() {
makeAutpObservable(this);
}
fetchData = async () => {
this.fetching = true;
const ah = asyncHelpers(this.fetchData);
// Debounce + no race condition 300ms
if (!await ah.debouce(300)) return;
try {
const item = await new ApiReq(`GET /api/v1/item/${this.itemId}`)
.withCahe(60) // кэш 60сек
// для отмены запросов
.withAbort(ah.abortControllersArray)
.send()
// race condition check
if (!ah.stillActual()) return;
const itemComments = await new ApiReq(`GET /api/v1/item-comments/${item.commentsId}`)
.withCahe(60) // кэш 60сек
// для отмены запросов
.withAbort(ah.abortControllersArray)
.send()
// race condition check
if (!ah.stillActual()) return;
const data:IItem = {
...item,
comments: itemComments
}
this.item = data;
this.error = null;
} catch (e) {
// race condition check
if (!ah.stillActual()) return;
this.error = e;
} finally {
// race condition check
if (!ah.stillActual()) return;
this.fetching = false;
}
}
}Ну и дальше в компоненте
const MyList = observer(() => {
useState(() => { someState.fetchData(); });
if (someState.fetching) return <Spinner />
return (
<div className={styles.list_container}">
{someState.map(item => <div className={styles.list_item}>...</div>)}
</div>
)
});
На текущем месте работы тоже использую mobx state, сам я перешел на реакт из ангуляра (не по своей воле, так было нужно).
Не знаю почему, но разработчики react почему то не любят все что связанно с классами, и считают это чуждым. По этому я использую классический подход, который приемлем в react
Ваше решение лаконично, и мне оно нравится!
Ваше решение лаконично, и мне оно нравится!
Спасибо) Главное что код вы видите в первый раз, не знаете как написана по капотом asyncHelpers и ApIReq, но из их использования, сразу становится все понятно, как именно они работают/должны работать и что вообще происходит, какой будет результат, и какую гибкость все это дает)
Не знаю почему, но разработчики react почему то не любят все что связанно с классами, и считают это чуждым
Ну далеко не все конечно считают классы чем-то чуждым, всё напрямую зависит от их уровня и опыта, поэтому не стоит себя ущемлять в угоду тем, кто считает классы чем-то чужеродным
По этому я использую классический подход, который приемлем в react
Фишка react в том, что там нет такого понятия как "приемлемо в react" или "не приемлемо в react", react это всего лишь библиотека для рендеринга с жизненным циклом, не более. А как ей пользоваться решаем мы)
Огласен.
Приемлем понятие не реакта, а его комьюнити
Приемлем понятие не реакта, а его комьюнити
Да и то, комьюнити реакта понятие очень сильно растяжимое. и оно очень сильно разнится по уровню) Какой-то части нравится одно, другой другое, третьей третье и т.п.
Вы только посмотрите на управление состоянием. кто-то вообще голый реакт юзает, кто-то redux, кто-то mobx, кто-то zustand, кто-то effector, кто-то recoil и т.д. и т.п.
Или например работа со стилями, css modules, styled-components, typestyle, tailwind и т.д. и т.п.
У комьюнити реакта нет общей позиции ни по одному вопросу, кроме как да, мы все юзаем реакт как таковой.
Поэтому говорить и думать о том, что разработчики react не любят X, за сейчас X возьмем классы, бессмысленно, потому что кому-то они нравятся, а кому-то нет, вот и всё. а не так, что так заведено. И уж тем более принимать решения как самому писать код и что-то использовать основываясь на так называемое комьюнити точно не стоит, т.к. по факту вы при этом не основываетесь вообще ни на чем, всё будет зависит лишь от того каким конкретно людям вы зададите вопрос и как на него конкретно они ответят.
Ваша статья вышла почти одновременно с моей, и про похожие кейсы. Предлагаю рассмотреть библиотеку react-redux-cache, может зайдет больше чем react-query - там есть нормализация и полный доступ к хранилищу. Конечно же рад конструктивным комментариям.
С каждой новой версией, все предыдущие туториалы становятся неактуальными, потому что меняется api и значение флагов, которые просто не совместимы с кодовой базой предыдущей версии. И ты либо переписываешь все, либо сидишь на старой версии. Лично я, после таких сюрпризов, по немного перебираюсь на `swr`, все то-же самое, только проще. Более того, мигрировать можно легко, заменив вызов хука, вся остальная логика продолжит работать как работала.
@tanstack/react-query + react typescript