Я же ответил.
Т.е. это одно и тоже?
Dmitry
Dmitry
Скажи задача какая? Что хочешь сделать при клике?
При клике мне нужно и перейти на «/desription» и в редакс стор закинуть кое-какие данные (без ассинхронщины), которые отобразить в <Description />. Спасибо, все работает через <Button onClick={() => { this.props.history.push(); showDescription(val); }} />
Юрий
Ребят, есть 3 роута, у них один и тот же хедер (лого, название роута, справа инфа о юзер профиле), но на каждом есть минимальные изменения, на одном в хедере еще кнопка есть, на втором и третьем роуте в хедере допольнительная инфа которая тоже другая.
Вопрос, как сделать 1 хедер который бы можно было использовать везде и на каждом роуте иметь нужный вид?
MVD
При клике мне нужно и перейти на «/desription» и в редакс стор закинуть кое-какие данные (без ассинхронщины), которые отобразить в <Description />. Спасибо, все работает через <Button onClick={() => { this.props.history.push(); showDescription(val); }} />
Что за данные? Нельзя их через урл передать ?
Eugene
При клике мне нужно и перейти на «/desription» и в редакс стор закинуть кое-какие данные (без ассинхронщины), которые отобразить в <Description />. Спасибо, все работает через <Button onClick={() => { this.props.history.push(); showDescription(val); }} />
Возможно лучше сделать эту логику уже в самом конечном компоненте в component did mount
Yury
Ребят, есть 3 роута, у них один и тот же хедер (лого, название роута, справа инфа о юзер профиле), но на каждом есть минимальные изменения, на одном в хедере еще кнопка есть, на втором и третьем роуте в хедере допольнительная инфа которая тоже другая.
Вопрос, как сделать 1 хедер который бы можно было использовать везде и на каждом роуте иметь нужный вид?
для будущей поддержки лучше один, чтоб в 3-х не изменять потом. Просто пропсами нужный вид
Dmitry
Возможно лучше сделать эту логику уже в самом конечном компоненте в component did mount
По сути да, можно и без редакса… там просто функция которая отдает большой объект в зависимости от переданного значения… Ладно, может перепишу
Юрий
для будущей поддержки лучше один, чтоб в 3-х не изменять потом. Просто пропсами нужный вид
создать хок, который будет принимать компонент и в зависимости от пропсов, например пути роутинга, будет делать нужный вид?
MVD
По сути да, можно и без редакса… там просто функция которая отдает большой объект в зависимости от переданного значения… Ладно, может перепишу
Лучше нативную ссылку всегда иметь. А то неочевидно что по нажатию на кнопку перебрасывают на другую страницу. Пользователь испугается и уйдёт
Ilya
Maksim
Dmitry
Лучше нативную ссылку всегда иметь. А то неочевидно что по нажатию на кнопку перебрасывают на другую страницу. Пользователь испугается и уйдёт
Кнопка «Узнать больше» по-моему предполагает переход на новую страницу, или лучше стилизовать как ссылку?
MVD
Aidyno
MVD
Кнопка «Узнать больше» по-моему предполагает переход на новую страницу, или лучше стилизовать как ссылку?
Кнопка не предполагает перехода на другую страницу в независимости от того что на ней написано.
Ilya
попробую*
Dmitry
Ilya
Ilya
или я может что-то не так делаю
Ilya
Понял как можно это исправить, просто isUsersLoad прописать в сторе и если false, то в useEffect загрузить данные, а если он true, то не будет каждую секунду перезагружать
Джон
Denis
Ilya
Хммм
Ilya
Хорошее замечание
🦜
Sergiy
как отрисовать компонент, в зависимости от роута
Тимофей 🛴
Ivan
???
это типа тред последнего загугленного пакета?
он намекает, что не стоит фетчить данные и заниматься всякой асинхронщиной в компонентах
лучше воспользоваться чем-то специализированным, типа redux-thunk или redux-saga
а может я его неправильно понял
Denis
как отрисовать компонент, в зависимости от роута
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md
Sergiy
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md
да нет...
Как роуты есть.
Как проверить например в хедере, на каком мы роуте находимся и выводить разные компоненты в зависимости от этого
Ivan
в смысле? вешать сайды только ради фетча?))
«вешать сайды только ради фетча» — не очень понятная формулировка
но библиотеки, о которых я написал, придумали специально для обработки сайд-эффектов вроде фетча
Yury
Denis
да нет...
Как роуты есть.
Как проверить например в хедере, на каком мы роуте находимся и выводить разные компоненты в зависимости от этого
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md
Ivan
в смысле? вешать сайды только ради фетча?))
когда в проекта один-единственный вызов fetch и две кнопки, оно, может быть, и не нужно
можно поебаться с useEffect и добиться желаемого
но это не подойдёт для настоящего приложения
Ivan
да нет...
Как роуты есть.
Как проверить например в хедере, на каком мы роуте находимся и выводить разные компоненты в зависимости от этого
https://reacttraining.com/react-router/web/api/Hooks
Тимофей 🛴
в смысле? вешать сайды только ради фетча?))
В компоненте не должно быть столько логики, он должен просто сообщить при маунте или изменении какого то параметра, что нужно получить данные. Логика получения этих данных должна быть в thunk (ну или в чем то похожем, зависит от state manager)
Denis
когда в проекта один-единственный вызов fetch и две кнопки, оно, может быть, и не нужно
можно поебаться с useEffect и добиться желаемого
но это не подойдёт для настоящего приложения
в чем проблема обрабатывать состояние фетча в самом экшене?
жс вам асинк авейт + трайкетч зачем дал, чтобы ради фетча на проект сайды клались?
Sergiy
проблема решена
Ivan
в чем проблема обрабатывать состояние фетча в самом экшене?
жс вам асинк авейт + трайкетч зачем дал, чтобы ради фетча на проект сайды клались?
что такое сайды и куда они кладутся?
Denis
function* saga(action) {
try {
let user = yield fetch(`https://api.github.com/users/${action.name}`);
user = yield user.json();
yield put({ type: 'FETCH_USER_SUCCESS', user, id: action.id });
} catch (error) {
yield put({ type: 'FETCH_USER_ERROR', error, id: action.id });
}
}
function* initSagas() {
yield takeLatest('FETCH_USER', saga);
}
async function fetchUser({ name, id }) {
try {
let user = await fetch(`https://api.github.com/users/${name}`);
user = await user.json();
store.dispatch({ type: 'FETCH_USER_SUCCESS', user, id });
} catch (error) {
store.dispatch({ type: 'FETCH_USER_ERROR', error, id });
}
}
в чем разница?
Тимофей 🛴
Ivan
function* saga(action) {
try {
let user = yield fetch(`https://api.github.com/users/${action.name}`);
user = yield user.json();
yield put({ type: 'FETCH_USER_SUCCESS', user, id: action.id });
} catch (error) {
yield put({ type: 'FETCH_USER_ERROR', error, id: action.id });
}
}
function* initSagas() {
yield takeLatest('FETCH_USER', saga);
}
async function fetchUser({ name, id }) {
try {
let user = await fetch(`https://api.github.com/users/${name}`);
user = await user.json();
store.dispatch({ type: 'FETCH_USER_SUCCESS', user, id });
} catch (error) {
store.dispatch({ type: 'FETCH_USER_ERROR', error, id });
}
}
в чем разница?
1) в том, что на сагу тесты пишутся одной рукой
а с async fetchUser я с удовольствием посмотрел бы на твои тесты
2) что ты будешь делать, если с задержкой 50 мс произойдёт два вызова твоей async fetchUser?
на сагах я возьму takeLatest и буду пить маргариту на пляже
Тимофей 🛴
function* saga(action) {
try {
let user = yield fetch(`https://api.github.com/users/${action.name}`);
user = yield user.json();
yield put({ type: 'FETCH_USER_SUCCESS', user, id: action.id });
} catch (error) {
yield put({ type: 'FETCH_USER_ERROR', error, id: action.id });
}
}
function* initSagas() {
yield takeLatest('FETCH_USER', saga);
}
async function fetchUser({ name, id }) {
try {
let user = await fetch(`https://api.github.com/users/${name}`);
user = await user.json();
store.dispatch({ type: 'FETCH_USER_SUCCESS', user, id });
} catch (error) {
store.dispatch({ type: 'FETCH_USER_ERROR', error, id });
}
}
в чем разница?
1. Саги говно
2. Ты мне это хочешь сказать? Вместо санков юзать такие функции?
Ivan
function* saga(action) {
try {
let user = yield fetch(`https://api.github.com/users/${action.name}`);
user = yield user.json();
yield put({ type: 'FETCH_USER_SUCCESS', user, id: action.id });
} catch (error) {
yield put({ type: 'FETCH_USER_ERROR', error, id: action.id });
}
}
function* initSagas() {
yield takeLatest('FETCH_USER', saga);
}
async function fetchUser({ name, id }) {
try {
let user = await fetch(`https://api.github.com/users/${name}`);
user = await user.json();
store.dispatch({ type: 'FETCH_USER_SUCCESS', user, id });
} catch (error) {
store.dispatch({ type: 'FETCH_USER_ERROR', error, id });
}
}
в чем разница?
user = yield user.json();
вот тут неправильно
саги, они не так просты, как кажется
Maxim
Сагу обзывают говном наверное те кто не работает со сложными запросами
voix
1. Саги говно
2. Ты мне это хочешь сказать? Вместо санков юзать такие функции?
1) сильное заявление )
Ivan
function* saga(action) {
try {
let user = yield fetch(`https://api.github.com/users/${action.name}`);
user = yield user.json();
yield put({ type: 'FETCH_USER_SUCCESS', user, id: action.id });
} catch (error) {
yield put({ type: 'FETCH_USER_ERROR', error, id: action.id });
}
}
function* initSagas() {
yield takeLatest('FETCH_USER', saga);
}
async function fetchUser({ name, id }) {
try {
let user = await fetch(`https://api.github.com/users/${name}`);
user = await user.json();
store.dispatch({ type: 'FETCH_USER_SUCCESS', user, id });
} catch (error) {
store.dispatch({ type: 'FETCH_USER_ERROR', error, id });
}
}
в чем разница?
let user = yield fetch(`https://api.github.com/users/${action.name}`);
тут тоже херня написана
Denis
let user = yield fetch(`https://api.github.com/users/${action.name}`);
тут тоже херня написана
да это просто паста с рандомной статейки
смысл не в этом был
🦜
а почему рот в сагах
voix
Так он не про сагу конкретно говорил, а про преимущество вынесения всех сайд эффектов в отдельное место.
Denis
1. Саги говно
2. Ты мне это хочешь сказать? Вместо санков юзать такие функции?
тебе смысла отвечать не вижу
Ivan
да это просто паста с рандомной статейки
смысл не в этом был
саги — очень мощный инструмент, который нужно уметь готовить
гораздо проще, конечно, делать запросы из cDM, но это
1) не тестируемо
2) не поддерживаемо
3) спагетти код, в котором три разных сущности (данные, вью и транспорт) слеплены в одном месте
Denis
1) в том, что на сагу тесты пишутся одной рукой
а с async fetchUser я с удовольствием посмотрел бы на твои тесты
2) что ты будешь делать, если с задержкой 50 мс произойдёт два вызова твоей async fetchUser?
на сагах я возьму takeLatest и буду пить маргариту на пляже
1) не писал тесты под сагу, сказать не могу
2) если шлется несколько запросов, то может быть надо не искать решение этой проблемы в либах, а выяснить какого хуя такое происходит и так больше не делать?)
Ivan
1) не писал тесты под сагу, сказать не могу
2) если шлется несколько запросов, то может быть надо не искать решение этой проблемы в либах, а выяснить какого хуя такое происходит и так больше не делать?)
> ыяснить какого хуя такое происходит
ну автокомплит тебе нужно сделать с подтягиванием данных с бэка
Ivan
> ыяснить какого хуя такое происходит
ну автокомплит тебе нужно сделать с подтягиванием данных с бэка
1. пользователь ввёл что-то в инпут
2. тебе нужно подождать 300 мс с момента последнего onChange
3. отправить запрос
4. если пользователь что-то вводит во время обработки запроса — отменить старый запрос и продолжить с п.2
5. когда данные пришли, отобразить рядом с инпутом
Denis
> ыяснить какого хуя такое происходит
ну автокомплит тебе нужно сделать с подтягиванием данных с бэка
ну аксиос прекрасно рвет запросы
напомню, я не противник никаких либ, просто не вижу смысла в таких манипуляциях просто для фетча даты
voix
1) не писал тесты под сагу, сказать не могу
2) если шлется несколько запросов, то может быть надо не искать решение этой проблемы в либах, а выяснить какого хуя такое происходит и так больше не делать?)
Ты когда-нибудь принимал участие в достаточно больших проектах, где не используются миддлвари или другие абстракции для отделения сайдэффектов?
Orest🇺🇦
JSX не позволяет писать if else ? только тернарный оператор для логических операций ?
Тимофей 🛴
Andrey
Сагу обзывают говном наверное те кто не работает со сложными запросами
мы тут вроде не с SQL базами общаемся через саги
хз, в чем их профит
громоздкие, неудобные
Ivan
ну аксиос прекрасно рвет запросы
напомню, я не противник никаких либ, просто не вижу смысла в таких манипуляциях просто для фетча даты
старые бородатые дядьки пишут в книжках «разделяйте зоны ответственности», «не смешивайте в одном месте разные сущности», «соблюдайте SOLID»
а свежие чуваки с горящими глазами говорят: «идите в жепу, старики, не вижу смысла разделять вью и фетч даты»
забей, делай как нравится и получаей от жизни удовольствие
Dmitry
Denis
старые бородатые дядьки пишут в книжках «разделяйте зоны ответственности», «не смешивайте в одном месте разные сущности», «соблюдайте SOLID»
а свежие чуваки с горящими глазами говорят: «идите в жепу, старики, не вижу смысла разделять вью и фетч даты»
забей, делай как нравится и получаей от жизни удовольствие
а кто сказал что фетч даты в экшене это вью