Cenator 🐈
Но вообще кетч не нужен здесь, делает бесполезную работу, наверняка ты сверху еще чекаешь поле message
El
Эта часть кода возвращает результат в action creator, в нём диспатчится лист данных или ошибка.
El
api:
export const getDailyToUsd = async (fsym = 'BTC', limit = 10) => {
try {
const res = await fetch(
`https://min-api.cryptocompare.com/data/v2/histoday?fsym=${fsym}&tsym=USD&limit=${limit}`,
{ headers: authHeader }
);
if (!res.ok) {
throw new Error(res.Message);
}
return (await res.json()).Data.Data;
} catch(err) {
console.log('api err:', err);
return { message: err.Message };
}
};
экшен:
export const getDaily = (fsym = 'BTC') => async dispatch => {
dispatch(setLoading(SET_LOADING_TRUE));
try {
const list = await getDailyToUsd(fsym);
dispatch({
type: GET_DAILY_SUCCESS,
currency: fsym,
list
});
} catch(err) {
console.log('getData err:', err);
dispatch(setError(err.Message));
}
};
Как это сделать правильно и красиво ?
Andrey
Andrey
да вообще на что не повесишь onClick, подтянутое из reactstrap, все срабатывает сразу по загрузке =)
Hemonugi
да вообще на что не повесишь onClick, подтянутое из reactstrap, все срабатывает сразу по загрузке =)
надо указывать вроде как без ()
иначе выходит так, что ты ссылаешься на метод
Andrey
onClick={console.log(123)} да он даже логает сразу =)
Hemonugi
onClick={console.log(123)} да он даже логает сразу =)
вот тут читани https://ru.reactjs.org/docs/handling-events.html
там есть тот же самый пример с console.log()
Andrey
ок, глуну, спасибо
Andrew
ок, глуну, спасибо
Дак лол ты передаешь результат вызова функции а надо ее адрес, для тебя это значит что надо без () функцию подставлять
Сергей
Или без () или если нид параметры стрелочную функцию а в нее уже хендлсубмит...
Farik
Vyacheslav
artalar
El
Отправляю запрос fetch'ем, он на правильно формированный get запрос и на неправильно возвращает один ответ с status 200 и statusText OK.
Как мне кетчить ошибку? Ошибка должна приходить от https://min-api.cryptocompare.com/documentation?key=Historical&cat=dataHistoday.
В url в примере справа удалите С из fsym=BTC и ниже будет пример respons'a с ошибкой.
Vyacheslav
Отправляю запрос fetch'ем, он на правильно формированный get запрос и на неправильно возвращает один ответ с status 200 и statusText OK.
Как мне кетчить ошибку? Ошибка должна приходить от https://min-api.cryptocompare.com/documentation?key=Historical&cat=dataHistoday.
В url в примере справа удалите С из fsym=BTC и ниже будет пример respons'a с ошибкой.
ты ж сам можешь чекнуть нетворки, все нормально, так работает апи, они решили что по внутренним ошибкам всегда будет 200ый статус, ошибки они определяют по телу ответа, просто навесить catch на fetch не получится, нужно чекнуть что там в ответе
El
ты ж сам можешь чекнуть нетворки, все нормально, так работает апи, они решили что по внутренним ошибкам всегда будет 200ый статус, ошибки они определяют по телу ответа, просто навесить catch на fetch не получится, нужно чекнуть что там в ответе
Ok. В нетворках вижу нужный ответ для ошибки. Как оттуда Message ошибки подать в catch?
Код:
export const getDailyToUsd = async (fsym = 'BTC', limit = 10) => {
try {
const res = await fetch(
`https://min-api.cryptocompare.com/data/v2/histoday?fsym=${fsym}&tsym=USD&limit=${limit}`,
{ headers: authHeader }
);
console.log('res:', res);
if (res.Message) {
throw new Error(res.Message);
}
return (await res.json()).Data.Data;
} catch(err) {
console.log('api err:', err);
return { message: err.Message };
}
};
El
У меня не получилось пока с if (!response.ok), потому что в залогированном res status 200.
El
El
Vyacheslav
Ok. В нетворках вижу нужный ответ для ошибки. Как оттуда Message ошибки подать в catch?
Код:
export const getDailyToUsd = async (fsym = 'BTC', limit = 10) => {
try {
const res = await fetch(
`https://min-api.cryptocompare.com/data/v2/histoday?fsym=${fsym}&tsym=USD&limit=${limit}`,
{ headers: authHeader }
);
console.log('res:', res);
if (res.Message) {
throw new Error(res.Message);
}
return (await res.json()).Data.Data;
} catch(err) {
console.log('api err:', err);
return { message: err.Message };
}
};
тебе нужно определится что в теле отвтеа определяет ошибку, собственно искать это и уже в зависимости от воркфлоу делать что ли бо, как то отдельно отрабатывать, кидать общее исключение ничего не делать, res.json(), res.type === 'Error' && new Error(res.message) эт псевдокод, незнаю что за что отвечает
El
res.json() залогировал в консоль то же, что на вкладке Network. Теперь нужно избавиться от бесконечной подгрузки данных.
A, body дважды юзал через res.json(), вот почему.
Kirill
А для простого приложения нормальная практика использовать контекст, без всяких редаксов?
Roman
конечно, для этого он и создавался
Александр
А для простого приложения нормальная практика использовать контекст, без всяких редаксов?
Смотря каким образом использовать
Kirill
Банально - хранить выбранный идшник из листа чего нибудь
Cenator 🐈
А для простого приложения нормальная практика использовать контекст, без всяких редаксов?
Нет, реакт-редакс не просто так существует
Александр
С хуками
Я не об этом, я о том что контекст не предназначен для часто меняющихся данных, из-за частого измения значения контекста будет перерендериться все дерево компонентов, контекст подходит отлично для данных которые должны быть доступны глобально, но неизменны или меняются редко, например, хранить ссылку на graphql/rest клиент, хранить переводы, или ссылку на store ☺️ (см. react-redux)
Александр
Есть отличная статья https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/ как бы не относились тут к redux, его делали отнюдь не дураки и интересно и познавательно посмотреть на какие они грабли наступали. Акцентирую внимание на v5, где они решили хранить само состояние в контексте, а не ссылку на store как было ранее и как есть теперь снова.
Dmitriy
Я не об этом, я о том что контекст не предназначен для часто меняющихся данных, из-за частого измения значения контекста будет перерендериться все дерево компонентов, контекст подходит отлично для данных которые должны быть доступны глобально, но неизменны или меняются редко, например, хранить ссылку на graphql/rest клиент, хранить переводы, или ссылку на store ☺️ (см. react-redux)
А это ты ж говорил что в контексте хранить ссылку на клиент графкуель? Есть код в общем доступе?
Александр
А это ты ж говорил что в контексте хранить ссылку на клиент графкуель? Есть код в общем доступе?
Эм, ну так это распространённая практика, смотрите как делают Apollo или urql https://github.com/apollographql/react-apollo/blob/master/packages/common/src/context/ApolloContext.ts
Александр
А потом получают доступ к клиенту в компоненте через useContext https://github.com/apollographql/react-apollo/blob/master/packages/hooks/src/utils/useBaseQuery.ts#L18
Dmitriy
Эм, ну так это распространённая практика, смотрите как делают Apollo или urql https://github.com/apollographql/react-apollo/blob/master/packages/common/src/context/ApolloContext.ts
А тю ну да я чёт не проснулся). Год как аполо юзаю) там инстанс клиента контекстом шарится
Александр
А это ты ж говорил что в контексте хранить ссылку на клиент графкуель? Есть код в общем доступе?
Если вы про мое решение о котором я говорил, то там не graphql, нам надо было сделать хорошее решение для загрузки данных через REST, хотелось на хуках и с поддержкой SSR. Увы пока к открыть код проблематично, код тесно интегрирован пока в текущий проект, надо причесывать и отделять:(
Александр
Кстати, не в тему немного, react-relay релизнули версию с экспериментальным кодом использующим suspense для загрузки данных: https://github.com/facebook/relay/releases/tag/v6.0.0 . Вот только не понятно какое они решение для ssr используют, для поддержки суспенса на сервере нужен асинхронный react-dom/server/renderToString, а такового ещё нет в релизе реакта. Так что либо у них экспериментальная сборка реакта или нет ssr:/
El
тебе нужно определится что в теле отвтеа определяет ошибку, собственно искать это и уже в зависимости от воркфлоу делать что ли бо, как то отдельно отрабатывать, кидать общее исключение ничего не делать, res.json(), res.type === 'Error' && new Error(res.message) эт псевдокод, незнаю что за что отвечает
Спасибо, прокинул ошибку от API по цепочке api - action creator для ошибки - reducer - component.
Александр
Не то чтобы интересное что-то, кидают промис (например см тут, https://github.com/facebook/relay/blob/b7501c6472b34ae2b0bb8cc164a648bb90749d74/packages/relay-experimental/useBlockingPaginationFragment.js#L226 ), гораздо интереснее будет асинхронный сервер рендеринг увидеть.
Sergey
https://github.com/reworkcss/css/blob/master/lib/parse/index.js#L215
Dmitriy
Volodymyr
Как?
либо просто вычитывашеь все файлы стилей, и по очереди строишь AST для каждого. И там уже собираешь как тебе удобнее.
Александр
Релай это фейсбучный клиент для графакуеля?
Ага, я не использовал его, просто слежу за кодом
MVD
https://github.com/reworkcss/css/blob/master/lib/parse/index.js#L215
Ну я так понимаю там в prop будет название свойства, а в value его значение
MVD
Короче я решил свою задачу через регулярку
Archer
ребят, почему состояние не меняется?
this.setState(({hunting_grounds}) => {
return {
value: selectedOption,
selected: true,
id: selectedOption,
...hunting_grounds,
}
});
Sergey
ребят, почему состояние не меняется?
this.setState(({hunting_grounds}) => {
return {
value: selectedOption,
selected: true,
id: selectedOption,
...hunting_grounds,
}
});
потому что ты перетираешь новые значения старыми
Александр
А чего он такой сложный?)
А он вообще не очень красивый внутри, хотя аполло по сложности кода и путанности не уступает местами, хотите красивого кода в функциональном стиле - смотрите urql, но перед тем как смотреть код, неплохо бы почитать о такой штуке как callbag spec (на этой концепции библиотека построена на которой базируется urql)
Dmitriy
А он вообще не очень красивый внутри, хотя аполло по сложности кода и путанности не уступает местами, хотите красивого кода в функциональном стиле - смотрите urql, но перед тем как смотреть код, неплохо бы почитать о такой штуке как callbag spec (на этой концепции библиотека построена на которой базируется urql)
Так у аполло хуки сейчас. Намного все лучше стало по стилистике
Александр
Так у аполло хуки сейчас. Намного все лучше стало по стилистике
Я про внутреннюю реализацию, внутри у аполло все достаточно сложно и путано, но разобратно можно вполне, а у relay конечно там печаль
Dmitriy
Я про внутреннюю реализацию, внутри у аполло все достаточно сложно и путано, но разобратно можно вполне, а у relay конечно там печаль
А понял. Ну в кишки либы по хорошему счету юзер не должен иметь необходимость заглядывать . А что там внутри... хоть адок, главное что б багов юзеру не давало, хороший апи и перфоманс
Александр
А понял. Ну в кишки либы по хорошему счету юзер не должен иметь необходимость заглядывать . А что там внутри... хоть адок, главное что б багов юзеру не давало, хороший апи и перфоманс
Ну если свое пишешь похожее, или просто ради любопытства. Я вот грешу часто заглядыванием в сорцы либ. Можно интересные идеии подчерпнуть или увидеть на какие граблки наступали уже, чтобы подстелить соломы вовремя.
Zaff
Anonymous
Не стелизуешь нормально ты input type number
Dmitry
Anonymous
<button> +</button> <input type="text"> <button>-</button>
🦜
Anonymous
Дизайнер так видит
Карамультук
Dmitry
если у вас там не бывает случаев когда пользователю нужно 100500 единиц товара (лампочки там или еще че то) то две кнопки норм решение
Я с числом большим в чем проблема? Так же можно ограничить
Карамультук
Я с числом большим в чем проблема? Так же можно ограничить
пользователю придется херачить по плюсу долго тогда)
Zaff
если у вас там не бывает случаев когда пользователю нужно 100500 единиц товара (лампочки там или еще че то) то две кнопки норм решение
не, не будет такого)
я думал, что правильнее будет сделать инпут, чтобы юзер сам набирал кол-во
но магазин не продает такое кол-во товара, до которого юзеру бы пришлось кликать "+" больше 5 секунд
🦜
Anonymous
input предназначен для ввода, пожалуйста используйте input
Sm•ok
не, не будет такого)
я думал, что правильнее будет сделать инпут, чтобы юзер сам набирал кол-во
но магазин не продает такое кол-во товара, до которого юзеру бы пришлось кликать "+" больше 5 секунд
делай дебаунс при клике. У тебя запросы шлются при изменении ?
Dmitry
input предназначен для ввода, пожалуйста используйте input
Ага. Держи в курсе. В инпуте отобразишь html тоже?