Mihail
Mihail
Ребят подскажите что вы думаете что лучше использовать redux, context api, hooks, session storage в ситуации:
У меня есть апп - сайт ресторана где можно делать заказ и бронь. Есть компонент ордер в каком хранится информация про заказ(ресторан, стол, меню). Компонент заказ складывается из шагов : выбор ресторана, стола, меню, оплата. Каждому из этих шагов нужна инфа с компонента ордера. Я её прокидываю этим компонентам через контекст апи. Но при редиректах на другие страницы и тд, потом перехожу на ордер он конечно же пустой так как вся инфа в стейтах у него хранилась и я через контекст её вниз кидал. Как и где мне лучше хранить инфу про ордер? Не хотел её закидывать в редакс или локал-сешн сторидж так как новые тулзы появились давно и как то хранить такой объем инфы только для пару компонентов а 90% апки даже это не использует так себе. Что кто думает на счет этого??? Надеюсь доступно объяснил ситуацию)
В общий стор обычно кладут данные, которые будут использоваться несколькими компонентами
Не нужно абсолютно всё выносить в стор
sandwich 🥪
Согласен, но где тогда хранить? Юзер при переходе и серче на сайте если вернется в заказ то он должен сохранится (ну то что он уже выбрал)
sandwich 🥪
А я храню это в стейтах клмпонента заказа, и он рендерится сначала(
Mihail
Local storage?
sandwich 🥪
Слишком изи как то
Mihail
Можно корзину на бэкэ хранть вообще
sandwich 🥪
Ой не хотелось
sandwich 🥪
А хуками можно какой то сторидж как редаксовский создать
sandwich 🥪
Типо контекст
sandwich 🥪
И в нем хранить, и посоздавать редюсеры и передавать в компоненты что используют?
🅅aleriy
да храни ты где угодно, там где тебе удобно
🅅aleriy
лишь бы не забыл где именно :)
🅅aleriy
проблемы надо решать по мере их поступления, по возможности не создавая новые из воздуха
🅅aleriy
ни джаваскрипт, ни реакт не ограничивают твою фантазию в способе хранения твоих структур данных
Dmitriy
Таймураз
loxi
!ро дурачок пишет что-то про лохов при джойне
sandwich 🥪
Ну не хотелось портить таким подходом работать. Мы храним в редаксе юзера чтобы знать залогиненный он или нет и думали как ордер хранить... не ставить его же тоже в редакс как на свалку скидывать все туда...
sandwich 🥪
да храни ты где угодно, там где тебе удобно
🅅aleriy
Mihail
Daniil
Есть метод React.useCallback(..., []), повторяется часто, как его можно коротко и грамотно назвать? (предварительно вынести как абстракцию, слишком вербозно)
Kurzdor
cb
Kurzdor
прям дефолт для коллбэка
sandwich 🥪
Это для чего?
🅅aleriy
Imran
Ребят подскажите что вы думаете что лучше использовать redux, context api, hooks, session storage в ситуации:
У меня есть апп - сайт ресторана где можно делать заказ и бронь. Есть компонент ордер в каком хранится информация про заказ(ресторан, стол, меню). Компонент заказ складывается из шагов : выбор ресторана, стола, меню, оплата. Каждому из этих шагов нужна инфа с компонента ордера. Я её прокидываю этим компонентам через контекст апи. Но при редиректах на другие страницы и тд, потом перехожу на ордер он конечно же пустой так как вся инфа в стейтах у него хранилась и я через контекст её вниз кидал. Как и где мне лучше хранить инфу про ордер? Не хотел её закидывать в редакс или локал-сешн сторидж так как новые тулзы появились давно и как то хранить такой объем инфы только для пару компонентов а 90% апки даже это не использует так себе. Что кто думает на счет этого??? Надеюсь доступно объяснил ситуацию)
1. Используй библиотеку react-redux, там по типу MVC, отдельно контролерры вынесешь и обернешь контейнером каждый компонент которому хочешь дать доступ к хранилищу.
2. Напиши свой юзхук, который будет создавать состояние, чтобы оно не затиралось при редиректе. Ты используешь react-router для маршрутизации?
Imran
Anonymous
Какие варианты есть, что бы проверить интернет-соединение юзера?
Anonymous
https://github.com/redux-offline/redux-offline вот это из-за пару необходимых запросов тащить как-то не хочется
Cenator 🐈
Anonymous
Vladislav
Как можно подключить redux dev tools, если второй аргумент middleware?
artalar
Anonymous
Vladislav
Китикет
Проще через либу
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(reducer, composeWithDevTools(
applyMiddleware(...middleware),
// other store enhancers if any
));
Китикет
И понятно и красиво
Alexey
в документации ж прям цветным по светленькому написано
https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup
Китикет
Китикет
Не принимаю такую мешанину из window в нормальном коде
Alexey
ой, тыб в typescript-е видел (window as any)
Китикет
А во flow тупо игнорируешь и все)
Китикет
Просто uncovered area
Ruslan
всем привет, у меня есть restAPI и есть token я хочу чтобы реакт после авторизации по этому токену ходил на бекенд. Есть какие-нибудь готовые решения и хорошие практики?
Alexey
Ruslan
Ruslan
я прочитал что можно тупо в window.sessionStorage хранить и доставать от туда каждый раз
Alexey
ага и хранила его
fetch(..., { headers: { token: sessionStorage.token || null } } )
Китикет
Кто вообще юзает session storage для токена
Китикет
Это же дичь
Китикет
Браузер закрыл, авторизация слетела
Eugene
куки же, в идеале чтобы ее ставил бекенд👀
Ruslan
или мне react без node нужен?
Paul
Eugene
в fetch можно же указать, чтобы оно передавала куки.
Paul
Более того, кука должна помечаться флагом httpOnly
Paul
А потом в fetch указать withCredentials: true
Eugene
А вопрос портов, это больше про cors скорее 🤔
Paul
И браузер сам добавит куку в запрос
Alexey
Кто вообще юзает session storage для токена
например, мы делали приложуху медицинскую, в которой там по стандартам каким-то сша по защите персональных данных авторизация при выходе сбрасываться должна
более того, после 15 минут бездействия на сайте - тоже
Alexey
не все на реакте социальные сети пишут
Paul
Alexey
Paul
Вы же в курсе, что сешн стораж и локал стораж -- последнее место, где можно хранить токены?
Alexey
ух ты, а что с ними случится?
Paul
cross site scripting, доступность через js и все такое
Alexandr
Alexey
а куки в сейфе в это время лежат?
Paul
https://github.com/OWASP/CheatSheetSeries/blob/master/cheatsheets/HTML5_Security_Cheat_Sheet.md#local-storage
Alexey
xss -> document.cookie
Paul
Куку можно только стырить физически
Paul
Что явно тяжелее
Eugene
https://github.com/artalar/blog/blob/master/src/pages/notes.md#%D0%BE%D1%82%D0%BB%D0%B8%D1%87%D0%B8%D0%B5-cookie-%D0%BE%D1%82-localstorage