Cenator 🐈
Но вообще кетч не нужен здесь, делает бесполезную работу, наверняка ты сверху еще чекаешь поле message
El
Перед ретурном
На это редактор пишет " 'throw' of exception caught logically".
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
друзья, кто reactstrap пользовался? подскажите, вешаю onClick событие на кнопку, а оно сразу срабатывает, после рендера страницы. Как в дефолт эвент сабмита реактстрапа залезть можно?
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
ок, глуну, спасибо
Дак лол ты передаешь результат вызова функции а надо ее адрес, для тебя это значит что надо без () функцию подставлять
Dmitriy
главное что то умное сморозить и кинуть ссылку
Годами отработанный прием маркетинга)
Сергей
Или без () или если нид параметры стрелочную функцию а в нее уже хендлсубмит...
Farik
Кто использовал material ui кто знает почему стили поломаны (именно стили Header-...)?
Vyacheslav
Кто использовал material ui кто знает почему стили поломаны (именно стили Header-...)?
чел, ставлю гривну что ты сам их сломал, вон твой вызов makeStyle деструкторизован, если нет то покажи код использования хедера
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
Банально - хранить выбранный идшник из листа чего нибудь
Александр
С хуками
Я не об этом, я о том что контекст не предназначен для часто меняющихся данных, из-за частого измения значения контекста будет перерендериться все дерево компонентов, контекст подходит отлично для данных которые должны быть доступны глобально, но неизменны или меняются редко, например, хранить ссылку на graphql/rest клиент, хранить переводы, или ссылку на store ☺️ (см. react-redux)
Александр
Есть отличная статья https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/ как бы не относились тут к redux, его делали отнюдь не дураки и интересно и познавательно посмотреть на какие они грабли наступали. Акцентирую внимание на v5, где они решили хранить само состояние в контексте, а не ссылку на store как было ранее и как есть теперь снова.
Александр
А это ты ж говорил что в контексте хранить ссылку на клиент графкуель? Есть код в общем доступе?
Эм, ну так это распространённая практика, смотрите как делают 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:/
Александр
Не то чтобы интересное что-то, кидают промис (например см тут, https://github.com/facebook/relay/blob/b7501c6472b34ae2b0bb8cc164a648bb90749d74/packages/relay-experimental/useBlockingPaginationFragment.js#L226 ), гораздо интереснее будет асинхронный сервер рендеринг увидеть.
Sergey
Как?
https://github.com/reworkcss/css
Sergey
https://github.com/reworkcss/css/blob/master/lib/parse/index.js#L215
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, } });
Александр
А чего он такой сложный?)
А он вообще не очень красивый внутри, хотя аполло по сложности кода и путанности не уступает местами, хотите красивого кода в функциональном стиле - смотрите urql, но перед тем как смотреть код, неплохо бы почитать о такой штуке как callbag spec (на этой концепции библиотека построена на которой базируется urql)
Александр
Так у аполло хуки сейчас. Намного все лучше стало по стилистике
Я про внутреннюю реализацию, внутри у аполло все достаточно сложно и путано, но разобратно можно вполне, а у relay конечно там печаль
Dmitriy
Я про внутреннюю реализацию, внутри у аполло все достаточно сложно и путано, но разобратно можно вполне, а у relay конечно там печаль
А понял. Ну в кишки либы по хорошему счету юзер не должен иметь необходимость заглядывать . А что там внутри... хоть адок, главное что б багов юзеру не давало, хороший апи и перфоманс
Александр
А понял. Ну в кишки либы по хорошему счету юзер не должен иметь необходимость заглядывать . А что там внутри... хоть адок, главное что б багов юзеру не давало, хороший апи и перфоманс
Ну если свое пишешь похожее, или просто ради любопытства. Я вот грешу часто заглядыванием в сорцы либ. Можно интересные идеии подчерпнуть или увидеть на какие граблки наступали уже, чтобы подстелить соломы вовремя.
Zaff
привет, ребята как реализовать коунтер? просто 2 кнопки или лучше кастомно стилизовать input типа number?
Anonymous
Не стелизуешь нормально ты input type number
Anonymous
<button> +</button> <input type="text"> <button>-</button>
Zaff
Не стелизуешь нормально ты input type number
потому и спрашиваю) спасибо
Anonymous
Дизайнер так видит
Zaff
Дизайнер так видит
может просто случайно)
Карамультук
привет, ребята как реализовать коунтер? просто 2 кнопки или лучше кастомно стилизовать input типа number?
если у вас там не бывает случаев когда пользователю нужно 100500 единиц товара (лампочки там или еще че то) то две кнопки норм решение
Карамультук
Я с числом большим в чем проблема? Так же можно ограничить
пользователю придется херачить по плюсу долго тогда)
Zaff
если у вас там не бывает случаев когда пользователю нужно 100500 единиц товара (лампочки там или еще че то) то две кнопки норм решение
не, не будет такого) я думал, что правильнее будет сделать инпут, чтобы юзер сам набирал кол-во но магазин не продает такое кол-во товара, до которого юзеру бы пришлось кликать "+" больше 5 секунд
Dmitry
В див можно вводить
Думаешь как всякие слейт работают?
Anonymous
В див можно вводить
можно сделать маленький канвас, который будет рендерить инпут
Anonymous
input предназначен для ввода, пожалуйста используйте input
Dmitry
input предназначен для ввода, пожалуйста используйте input
Ага. Держи в курсе. В инпуте отобразишь html тоже?