#15: 🍕 React Pizza v2 - Сохраняем параметры фильтрации в URL
Вставка
- Опубліковано 29 вер 2024
- React Pizza V2 - Это обновлённый курс на 2022 год, одного из самых популярных курсов 🔥 по ReactJS для начинающих.
Более подробней тут: www.notion.so/...
Исходники доступны в Boosty или в моём Telegram-канале: t.me/archakov_im
❤️ Поддержка:
- Boosty (исходники, макеты): boosty.to/arch...
- Донаты: www.donational...
Старый курс React Pizza - • #1: React Pizza - разр...
👀 Демо: react-pizza-v2...
📝 Полный стек:
- ReactJS 18
- TypeScript
- Redux Toolkit (хранение данных / пицц)
- React Router v6 (навигация)
- Axios + Fetch (отправка запроса на бэкенд)
- React Hooks (хуки)
- Prettier (форматирование кода)
- CSS-Modules / SCSS (стилизация)
- React Content Loader (скелетон)
- React Pagination (пагинация)
- Lodash.Debounce
- Code Splitting, React Loadable, useWhyDidYouUpdate
Ссылка на исходник: github.com/Arc...
Ссылка на вёрстку: github.com/Arc...
Ссылка на дизайн: www.figma.com/...
Таймкоды: еще не готовы
📢 Платный курс по ReactJS с наставником: mentor.archako...
🔗 Следите за обновлениями и информацией в:
- Telegram-канале: t.me/archakov_im
- VK: archako...
- Личном блоге: archakov.im
- GitHub: github.com/Arc...
- Моё резюме: career.habr.co...
Исходник из этого урока Home.jsx: gist.github.com/Archakov06/af2b3a0219245dd209ae5a592d3cab81
откуда на этом уроке в компоненте Sort: на 14 строк memo, на 16 строке Ref и sortList уже вне объявленного компонента? в предыдущих уроках не было этого...
Привет, я реализовал сортировку намного проще и более понятно, и в этом уроке это пошло мне на руку, в итоге получилось проще всё, работает также. Надеюсь получился не говноКод и это не сломается в следующих уроках)))
@@demptd13 ага, такая же история. судя по комментам это перезалив, до этого было какое-то другое видео под №15
@ArchakovBlog отвечай!!! зачем ты это сделал!!!!
@@NayroTV ахахах, у тебя тоже жопа сгорела)
Туши быстрее)
чето на этом уроке у меня миллиард ерроров было, которые сквозь кровь, пот и слёзы были пофикшены, но итогом я получил просто голый бэкграунд вместо приложения. В итоге откатился до прошлого урока и скипнул этот. Если пропустить полностью этот урок - на последующие уроки это никак вообще не повлияет и можно спокойно, нормально заниматься дальше. Так что если кто с такими же проблемами встретиться, решение - скип этого урока.
П.С.: Не контент а вкуснятина, Денис спасибо!)
у меня тоже самое. я не пойму откуда взялся redux / slice.js и /redux/filter/selectors. Я так понимаю видимо было какое то промежуточное видео между 14ым и 15ым уроками.
Госопди почему я только что это прочитал, марочился 2 дня
на 17 уроке появляется fetchPizzza из ниоткуда если скипнуть этоти не возвращаться ( и селекторы тоже непонятно
@@YulVilaya селекторы из react-redux , ранее говорили об этом
Дэн, что-то не получается делать как у тебя. Я несколько часов голову ломаю)
Что именно?
@@ArchakovBlog Дэн, подскажи, пожалуйста, из-за чего при перезагрузке на категории "Все" не происходит загрузка?
Сложно сказать без кода. Чекни зависимости юзэффекта, при изменении категории на «Все», отправляется ли запрос и если нет, то проверь, что хранится в категории + проверь, когда меняешь на «Все», у тебя диспатч происходит или нет
Короче, как и многие словил траблы, скипаю
Проблема в том, что вот тут dispatch(setFilters({ ...params, sort })) params почему-то не считается итерируемым, возможно в qs были изменения, из-за чего у него тогда работало, а у нас сейчас нет
Автор, спасибо за труд!
тоже самое было, грешил на то что где-то напутал или еще чего, пока полтора часа сидел пытался разобраться, в консоли так же копировал объект ( через спред оператор) , через какое-то время сам заного по одному параметру передавал в редакс пока все не заработало, собственно я так и не понял почему изначально не работал спред оператор, короче печаль, так и не понял в итоге в чем была проблема...
Как это пофиксить? Такая же проблема
ОЧЕНЬ ОЧЕНЬ плохой прыжок в коде после прошлого урока. Абсолютно запутал...
Целый день ломаю голову, все несколько раз проверял, делал как в уроке, не получается. При первом рендере работает, перезагружаю страницу, страница не показывается. В адресной строке стираю полученный адрес, работает. В редакторе подчеркиваются зависимости в useEffect и пишется : "Эффект React.use имеет отсутствующую зависимость. Либо включите его, либо удалите массив зависимостей". еще заметил у Дена в коде новые подключения импорт. Может я что то пропустил, или я ...
я тоже повторил за видео и не работает как надо, проверял вроде все правильно , нету пока времени разбираться
Может вы currentPage не изменили на 1 в редаксе)
Не работало пока на 8:58 минуте я вместо state.sort = action.payload.sort написал state.sort.sortProperty = action.payload.sort. Ведь в ...params мы передаем только sortProperty а не целый объект с указанием name. Надеюсь поможет.
Спасибо, реально помогло
нет. ищем и передаём объект. но ты уже наверное сам разобрался =)
Бро ты мне сэкономил время. Спасибо!
Я второй или третий день пытаюсь сделать, чтобы оно работало. Был миллиард ошибок, спустя 1001 круг вокруг костра с бубном, единственное, что осталось - это было:
```
TypeError: can't access property "sortProperty", sort is undefined
```
10 раз переимпортировал зависимости и вплоть до точки скопировал его код и всё равно ничего, пока не наткнулся на твой коммент). От души!
Как-то упустила момент когда все файлы .jsx стали .js... И появились куча новых импортов и тд..
Автор, удалите этот урок, или перенесите в другое логически подходящее место в плейлисте. Этот урок приводит в тупик
Первый сложный урок из курса, спасибо за объяснения!)
он много что не показал!!!!!
@@NayroTV что не показал?
Почему-то код в некоторых компонентах отличается от того что было в прошлом видео
Как-будто я пропустил одну часть
Наверное изза этого не смог сделать фичу из этого выпуска
Ты про React.memo деструктуризацию компонентов и export lista?
Да тоже заметил
Он забыл наверное что делает для джунов :(
Надеюсь все же, что это не для джунов. В противном случае у меня для себя плохие новости )))
@@mryolo5334 а для кого? Сеньоров? Он сам в начале сказал что для джунов
Урок невероятно душный, кучу раз пересматривал, все равно по ощущениям не все понял. Буду смотреть следующие, если что вернусь, но надеюсь что нет)
В некоторых браузерах, к примеру, Firefox не работает path, используйте вариатив с composedPath(), загуглить дальше можете сами. Надеюсь кому-то поможет
Этот перезаписанный вариант 15 урока, на много лучше. Сразу понятно что и как должно работать, а то в первой записи 15 урока, чуть голову себе за час с лишним не сломал...
Благодарю за вложенный труд!
Бомби, у тебя отлично получается!
#react #reduxtoolkit
Спасибо, я пожалуй на следующий урок, а то чет всё сломалось, а я исправлениями ещё сильнее доломал, повезло что откатиться к началу смог😂
он много что не показал!!!!!
Можно пожалуйста выложить первую версию 15-го урока на ютуб, ибо у многих (судя по коментариям) возникают трудности с написанием кода, это касается изменения некоторых импортов, ввдение мэмо, и тд, просто уже битый час сижу ломаю голову и не знаю как сделать что бы все работало... надеюсь я не один такой
gist.github.com/Archakov06/af2b3a0219245dd209ae5a592d3cab81
вопрос к тем кто смотрел видео на бусти (15 урок изначальную версию), там все также как в этом видео или есть какие-то кардинальные различия?
@@ArchakovBlog спасибо большое!
Оч годные уроки. Спасибо. Но то, что здесь резко появляются какие-то другие файлы- это совершенно все "ломает". Пожалуй лучше пропущу этот урок
крч с этим методом не смог сделать, уж слишком много мелочевки, почему все таки не сделал с помощью useSearchParams?
У меня тоже всё упало..
-Пересматривал внимательно урок на наличие ошибок.
-Сделал все рекомендации по отладке в комментариях.
В итоге ничего не помогло. Откатил назад и реализовал тоже самое через useSearchParams
Ничего не понимаю, всё сделано точь-в-точь как в видео, стрикт режим отключен, код написан идентично файлу автора, но при этом при обновлении страницы строка запроса не очищается и приложение просто ломается
что-то дохера воды. Как то стало нифига не понятно.. делаем так, а не не так. Нада отак. Но тут не все правельно. Переделуем. И видео по 1.5 часа потом
Денис, я не уверен. но по идее, если в адресной строке будет стоять url, который соответствует изначальному состоянию хранилища(sort = rating, category = 0 и т.д.), то страница будет пустой, потому что мы достаем из url такие же данные как в initialState и в итоге запрос не уходит.
А курс - огонь)
Да, ты прав, я с этим немало провозился, думал что где-то в коде накосячил.
В общем написал небольшой фикс, где сравниваю строку, с начальным состоянием редукса. (не забудьте экспортировать initialState из filterSlice)
if(Object.values(params).join() === Object.values(initialState).join()){
fetchPizzas();
}
Если редакс не хочет обновлять fetch, то мы сделаем это сами. (это надо вставить сразу после строчки где есть qs.parse...)
@@guffboss2358 что то не помогло
@@DenysTolmachov if (
initialState.categoryId === Number(params.categoryId) &&
initialState.selectedSort === params.selectedSort &&
initialState.currentPage === Number(params.currentPage)
) {
fetchPizzas();
}
Вот 100% рабочий фикс, нужно импортировать initialState из filterSlice и вставить его после const params = qs.parse(window.location.search.substring(1));
@@misha_kanyuka спасибо, действительно работает
@@misha_kanyuka спасибо тебе чеел)
Ребята, у меня какая-то каша с юрл. Повторил как на видео, много ошибок в консоли. Что делать?
решил?
у меня было так потомучто много зависимостей оставил лишних
useEffect(()=>{
}, [МНОГО ЗАВИСИМОСТЕЙ ИХ НАДО УДАЛИТЬ])
лучше пропусти данный урок и возвращайся до ts
Сложный урок, буду пересматривать
Он сложнее мне показался чем redux
сложный урок
import { selectFilter } from '../redux/filter/selectors'; otkuda mne ne ponela
Все сделал в точности по "видео", но трэшак начинается с момента, когда export sortList (который до этого назывался просто list) вставляешь в home на 11:20.
Примечательно, что в проекте откуда-то почему-то Sort становится const с использованием useMEmo, о котором не было в этом курсе до этого ни слова.
Делаешь такой все делаешь, правишь ошибки (потому что то и дело что-то не сходится), доходишь до проверки на 12:00 - в видосе все работает, у тебя не работает.
Заходишь в комменты - все воют, что видос был переписан но видать с места из будующих уроков, где на 12:00 идет явная нестыковка. И ты такой только изучил редакс и новую тему, видишь какие-то новые хуки, которых никогда не видел (useMEmO)и просто в ахуе от того, как это дальше смотреть и что делать
Сказать, что не хватает МАТОВ - нихуя не сказать
Оказалось, всего-то надо было удалить из индекса strict mode, беру свои слова назад! )
Спасибо за очередной крутой видос!) Но Юз Мемо прямо сбивает, кажется, что у тебя не из-за того, что у тебя что-то не так в проекте, а то, что в нем что-то уже переделано )
Два дня втуплял, думал что что то не так делаю ))) Спасибо @@Виктор-й2ф6р
Юхууууууу ну наконец-то 🥳🥳🥳
У меня возникла проблема, если обновить главную страницу с категорией все, то не поступает запрос и информация не приходит, вроде уже посмотрел код не один раз сравнил, но все-равно не работает, может у кого такая же проблема
Можешь попробывать поледний useEffect изменить (убрать условие), но хз на сколько это будет верным решением.
useEffect(() => {
window.scrollTo(0, 0);
fetchPizzas();
isSearch.current = false;
}, [categoryId, sort.sortProperty, searchValue, currentPage]);
@@КоляБеленчук ну по идее это будет работать, но по факту не будет проверки с URL, а просто в любом случае будет запрос, но все равно, спасибо за совет
@@fixggamer8756 так и есть(
Да, такая же ситуация
Возможно, сделал костылем, но пока обхожу эту ошибку вот так:
if (
window.location.search &&
window.location.search !==
"?sortProperty=rating&categoryId=0¤tPage=1"
)
Я чет вообще не понял, а почему код совершенно другой, который отличается от 14 урока? У меня ломается приложение
Господа, это какой-то перезаписанный урок, когда было написано все?
Или почему появились мемо в компонентах, селекторы из реселекта и пр мелочи, которых не было в прошлом уроке?
Я в конце урока объясняю этот момент
@@ArchakovBlog в этом ролике конце не обьяснил
сложнее редакса, столько всяких мелких действий
Запиши видео про реакт менторство почему доступен только один тариф?
СМОТРИТЕ ЭТОТ УРОК ПОСЛЕ 19го! Так как код отличается, и у вас он не будет работать. Если че можете даты глянуть, этот урок записан 05.06.2022 сразу после 19го.
ага как сделать 17 тый без этого? честно говоря бросить хочется, так как я делал свой отличающийся проект, но мне нужна была чёткая последовательность, я хрен разберу теперь что тут наколбашенно в этих уроках с 15 по 19, то есть скопировать в слепую я смогу, но свой проэкт у меня дальше не получится нормально сделать
@@thebeastd4158 Внизу про стрикт мод написано , попробуй
@@thebeastd4158 я ваще фул скипнул этот урок и не возвращался к нему. И ты забей
@@lilchich4823 ну там и 17тый не работает тогда, но я тоже скипнул этот курс, кое что возьму отсюда на вооружение конечно, но сейчас мне нужно делать полноценные вещи с бэкэндом, смотрю другие уроки по node и как совместить фронт и бэк, благодарен человеку за уроки, но нужно углубляться дальше
@@thebeastd4158 почему тоже? я не скипнул курс, я скинпул только этот урок
Я три раза пересмотрел видео и три раза сделал всё один в один. Почти всё работает, но если нажать все и перезагрузить браузер, то запрос почему то не делается. Но нажать на другую категорию, запрос снова выполниться. Не понимаю... Но в любом случае спасибо)
Може пізніше це виправиться, бо в 17 уроку він це буде доробляти.
В 17 уроці це все зникло при перезагрузці)
Самый сложный урок и в итоге все сломалось к 22 минуте
Блин. Сам затупил с условием. Вместо false, true указал. Короче все работает! Спасибо за урок)
Один з найскладніших уроків((
+
интересно, перепроверил всё раз 5 (проверял всё с вложенного гиста) но у меня один фиг параметры вшиваются в ссылку при первом рендере ((
Отключите строгий режим.
если кто-то озадачен что useEffect в браузерной консоли отрабатывает два раза, не пугайтесь, это обычное поведение при включенном режиме Strict Mode 🙂
а как его отключить?
@@v1shn3vski83 удалить строгий режим
В моём случае ошибка была в том, что был включен strict mode и компонент Home рендерился дважды, useEffect с пустым массивом зависимостей тоже отрабатывал дважды. Отключите его и всё будет работать как в уроке)
ТЫ ЛУЧИК СВЕТА Я УЖЕ В ТАКОМ ТИЛЬТЕ БЫЛ И ЗАБЫЛ ПРО СТРИКТ МОД
Надеюсь, кому-то помогу:
Вынесите вне компонента,
export const list = [
{ name: "популярности (DESC)", sortProperty: "rating" },
{ name: "популярности (ASC)", sortProperty: "-rating" },
{ name: "цена (DESC)", sortProperty: "price" },
{ name: "цена (ASC)", sortProperty: "-price" },
{ name: "алфавиту (DESC)", sortProperty: "title" },
{ name: "алфавиту (ASC)", sortProperty: "-title" },
];
Используйте list, а не sortList, как было в видео.
Когда будете import в Home, не забудьте про дестрктуризацию:
import { list } from "../components/Sort";
как?? но помог)
ппххп я тоже навал list вместо sortList
спасибо!!!
я реально зашел в тупик. помогите) я так понял, был какой то промежуточный урок. где были созданы новые папки и файлы и установлен React.memo. Есть ли возможность его найти?
нет. автор об этом тупо молчит!
Напишите плз, кто разобрался, не работает, как должно(
ПРИВЕТ, я не разобрался( , у тебя уже 2 месяца прошло, может ты нашел решение? я только сейчас прохожу и не могу найти ошибку хз.
подскажите, откуда selectFilter???? почему - то у меня нет после прохождения 14 уроков (((( в общем, почему - то все запуталось, я с 17 урока пришла сюда, открыла ваш код, но все равно есть новые файлы которые не могу найти - это селект фильтер/ как бы теперь дойти до конца приложения или новичку это невозможно сделать ? первые уроки так хорошо начинались , и вот к концу видимо что - то сделано за кадром что непонятно как реализовать функционал 😪😪😪
Привіт, подивіться до кінця відео автор сказав що в наступних уроках цих змінних небуде бо це перезалив. Я теж пропустив 15 урок і тепер до нього повернувся з 17 уроку, впринципі все працює, тепер переходжу до 17 уроку.
Спасибо за урок. Но пошел ты каким-то длинным путем, костылей понаставил. Думаю тут можно было и попроще написать код
Здравствуйте ,можете подсказать, почему вы использовали useRef при проверке на изменения при загрузке страницы. Я проверил, так же, но только с useState работать не будет, хотелось бы узнать причину. Заранее спасибо!
Урок непростой по сравнению с предыдущими, пришлось пораскинуть мозгами, но все равно было очень интересно! Иногда полезно напрячь извилины, а не тупо списывать код по видео
В общем, урок ни о чем. Лучше сразу скипайте. Тут много чего, что он написал без записи. У вас будут одни ошибки. Если вы тож решили сначала сделать, потом прочитать комменты, то просто откатитесь и смотрите дальше. Хотя полагаю, что без этого урока дальше вообще запутано будет, но другие пишут норм все
другие пишут потому что подлизываются!
У меня все работает, но проблема в том, что я последние несколько уроков нахожусь в прострации и тупо утратил нить повествования. Redux пока дается не очень.
@@mryolo5334 советую пока не поздно бросить это дело и найти другую работу. В айти уже не войти. Посмотри требования к джунам и их зп. Я буквально видел в мск нужен фулстак за 20к в месяц
@@Параноик-ш6х да, я в курсе что в It творится жесть. Во всяком случае понятие "джун" за последнее время очень сильно сместилось в сторону "мидл". Сам учу фронтенд уже больше как хобби и это несмотря на то, что уже года 3 как изучаю программирование. В моем случае я ориентируюсь на европейский рынок, так как живу не в РФ. Но и здесь индусы сделали свое дело. Почти в каждой более и менее крупной компания на удаленке сидят индусы.
@@Параноик-ш6х я тебе даже больше скажу братюля: я видел объявления, где джуны сами должны платить работодателю, чтобы работать. Бросайте это дело. Ну я продолжу смотру что там Арчаков опять наворотил
Ничего не работает после этого видео, урок совсем другой, это не продолжение 14 урока. И код по другому написан, короче каша, теперь пойми что, где и как надо фиксить
Сделал через через useSearchParams, он же специально для этого создан. В нем все есть и не нужен qs и useNavigate.
@Marat React быть может потом объяснит
Можешь плиз дать ссылку на свой репозеторий ? Не могу понять как правильно здесь использовать useSearchParams
@Marat React Вполне возможно, что человек не в курсе данного API т.к. обилие этих API зашкаливает, что на самом деле круто, потому-что с ними не нужны дополнительные зависимости.
Спасибо, добрый человек, классный хук)
По-моему все можно сделать гораздо проще и понятнее, достаточно сразу установить нужный initialState:
function getInitialState() {
if (window.location.search) {
const params = qs.parse(window.location.search.slice(1));
for (let field in params) {
if (typeof params[field] !== 'string') continue;
params[field] = Number(params[field])
}
return params;
}
return {
category: 0,
page: 1,
sortType: sortTypes[0],
};
}
export const filterSlice = createSlice({
name: 'filter',
initialState: getInitialState(),
// .....
зачем useRef использовать для хранения true/false? Почему не useState? useRef использовали для ссылок - теперь каша...
Почему мы для isSearch и isMounted используем useRef, а не useState?
да, интересно в чем разница
Потому что если бы ты делал изменение через, например, setIsSearch(true) - ты бы заставил компонент перерисоваться, поскольку изменение стейта перерисовывает компонент.
А вот используя useRef ты можешь хранить какие-нибудь данные без повторной перерисовки. Здесь нам надо четко придерживаться алгоритму без перерисовки, потому так.
@@StrikerFeed спасибо за ответ)
попробуйте заюзать rtk-query, он закеширует запросы... А так хрень получаеться с этим isSearch....
Заметил, что активная категория скачет от "Все" к тому, что задано в поиске, из-за начального состояния. Это возможно как-то исправить?
пропускаем это видео
очень сложно понять
но спасибо
тяжкий урок, немного недопонимал логику работы с тремя useEffect. Но работа с console.log расставила все по местам, спасибо)
Спасибо за урок! Урок непростой, но в целом все понятно. Мысль и идея хорошо прослеживается. При первом просмотре немного было непонятно, но все решается если посмотришь еще раз:)
Если хотите исправить сброс параметров при клике на логотип - то предлагаю свой костыль. Запихнуть isMounted в редакс, а в хедере создать кастомную функцию в которой будем сбрасывать все параметры и соответсвтенно isMounted = false. Код ниже:
const onClickHome = () => {
dispatch(changeCategory(0))
dispatch(changePage(0))
dispatch(changeSort("rating ↑"))
dispatch(changeMount(false))
}
круто, пофиксил. Спасибо добрый человек!
Что в итоге делать с уроком если половины информации не хватает?
Вижу 32 минут, ну думаю, быстро закончу с этим уроком, в итоге весь день провел, но все работает теперь
+ )
почитал комменты, хз, как у других, но я повторял все точно за автором, все работает без проблем. Начинал с сникерсов месяц назад на канале у Арчакова, и в итоге только неделю назад допер, что такое юзЕффект, а тут уже такие страсти )). Олсо, для таких же новичков НАСТОЯТЕЛЬНО РЕКОМЕНДУЮ инициализировать гит репозиторий в проекте и на протяжении каждой серии/каждой новой фичи комитить это себе, чтобы можно было в случае чего всегда откатится и пересмотреть серию. Если не умеете в гит, то читайте и возвращайтесь. Надеюсь, кому-то было полезно )
const isMounted = React.useRef(false);
....
React.useEffect(() => {
if (isMounted.current) {
const queryString = qs.stringify(
{ sortProperty: selectedItem.sortProperty, currentPage, categoryId },
{
.........
почему просто не сделать переменную в которую записать const isMounted = true.
Зачем делать const isMounted = React.useRef(false)? по сути там хранится только или тру или фолс... Объясните плз...
useRef не перерендеривает DOM дерево, когда меняется его значение, мб с этим связано
а зачем юзать const isSearch = useRef(false); зачем здесь юзреф если он используется не по назначению? почему не использовать обычные пременные и в них не хранить состояние true/false?
все я понял юзреф сохраняет свое состояние при ререндере, а обычная переменная каждый бы раз сбрасывалась к состоянию фолс
У меня какой то неожиданный затуп.
Вот приложение загружается с корневого адреса '/', происходит проверка, подставляются стартовые данные и получаю пиццы,
далее я тыкаю на вторую категорию, делается запрос и получаю нормальный рендер,
далее я возвращаюсь на первую категорию и получаю такие параметры в URL '?currentPage=1&sortProperty=rating&categoryId=0' и нормальный рендер.
НО если я решу перезагрузить страницу с этими параметрами, то у меня не делается запрос и логично не грузятся пиццы, причем КеК в том что если я меняю через морду сайта любой параметр и так же обновляю стр, то все работает, все ломается исключительно на стоковых обнуленных параметрах)
пришел к такому-же результату. Пока не понял в чем проблема...
Можем ли мы как-то проверять правильность введенных данных в url? То есть пользователь же может ввести любую страницу, даже ту, которой у нас не будет и тогда все поломается. Как это обрабатывать, если у нас есть бекенд, по ошибке кидать запрос с initial параметрами?
надеюсь что это самый неудачный урок а дальше будет норм)
Все салем! У меня тоже не получалось в начале в этом видео)) Винил во всем автора. Но собрался духом, силами и решил все перепроверить. Оказалось, что виноват я сам ахаха. Вдруг кому поможет, у меня была ошибка в том, что в useEffect я не поставил в нем такие скобки в конце [ ]. Автору всех благ и сил!
омг. все ж хорошо шло до этого
Если перезапустить приложение все ссылки прописываются в URL строке и все работает фильтрация,пагинация,сортировка,но после обновления страницы.Выкидывает ошибку мол вебпак не видит строку. _components_Sort__Webpak module 5__.default.find is not a function.А если убрать в строке до localhost:3000 всё работает.
как решил вопрос?
@ArchakovBlog дайте исходник Sort.jsx вы поменяли его в этом уроке
а почему для проверки мы используем именно useRef?
Насколько я правильно понял, чтобы компонент не перерисовывался , поэтому используем хук useRef.
@@ЭдриаӇ̄
const params = false
или
const params = React.useRef(false)
В React разница между const params = false и const params = React.useRef(false) заключается в том, как эти значения обрабатываются и изменяются компонентом.
const params = false: Здесь params является просто переменной со значением false. При каждом рендере компонента, params будет иметь одно и то же значение false. Если вы попытаетесь изменить значение params напрямую, например, params = true, это вызовет ошибку, потому что вы не можете изменять значение переменной, объявленной с использованием const.
const params = React.useRef(false): Здесь params является объектом типа Ref, созданным с помощью React.useRef. useRef возвращает изменяемый объект, содержащий свойство .current. При каждом рендере компонента params остается неизменным, но вы можете изменять его свойство .current без вызова перерендера компонента. Например, params.current = true изменит значение, хранящееся в params, но компонент не будет перерисован. Это полезно, когда вам нужно сохранить значение между рендерами без вызова перерисовки.
Итак, если вам нужно иметь простое значение, которое будет обновляться и вызывать перерисовку компонента, используйте const params = useState(false). Если вам нужно сохранить значение без вызова перерисовки компонента при его изменении, используйте const params = useRef(false).
Шикарно! Спасибо!
Наконец-то вышел,ура 🥳Спасибо за контент,надеюсь теперь видео будут выходить почаще
MDN: URLSearchParams
апишка для работы с квери строками есть в браузерах из коробки.
Почему в уроке ты решил не использовать хуки из React Router: useSearchParams для работы с параметрами и useLocation для проверки имеются ли параметры?
Такой же вопрос возник
тебе ніби на цьому уроці підмінили
useSearchParams из React router V6?
da
Подскажите, пожалуйста, от куда взялся import { selectFilter } from '../redux/filter/selectors' !? В предыдущих уроках не было этого..
8:20
18 урок, 31:20 там фиксится этот момент
@@komrad124 не верно. там про другое.
Если так абстрагироваться от всех нюансов и посмотреть со стороны, то вроде все понятно
Но когда дело доходит до того, чтоб повторить самому - хер там !
Мозг подвзорвался от перечня того, что нужно проделать чтоб херовы параметры вшывались в херов url
Пошло оно все ... 😂
Cannot read properties of undefined (reading 'sortProperty')
Я не одинок, тоже не работает, 3 раза пересматривал ))
@Marat React толку, если вся файловая структура была переделана?
Там файловая структура та же осталась. Поменялся только немного App.jsx. и то я объяснил что я поменял.
Даже если ты не смог повторить этот урок, все остальное там осталось также и спокойно можешь делать оставшуюся часть
@@ArchakovBlog как я понял, там теперь по-другому экспортируются компоненты, то есть не через export default, а отдельно
@@ArchakovBlog массив из Сорта тоже можно вытащить? Он раньше был в компоненте, а теперь у вас он отдельно. Когда он в компоненте -его нельзя экспортировать
привет! Я верно понимаю, что в классовых компонентах вышеописанный нюанс с useEffect решают методы жизненного цикла (в частности можно использовать componentDidMount)?
привет, да
Денис, большое спасибо! Очень крутой, полезный урок. Заставляет пошевелить мозгами)
у меня в Redux DevTools во вкладке Diff переход состояния не показывает 12:00, только это (states are equal), как это пофиксить, кто знает ?
Если вдруг кто-то решил делать не через React а через NextJS, то useNavigate можно заменить на import { useRouter } from "next/navigation";
НЕ ИСПОЛЬЗУЙТЕ название экшена setSort, если передавать туда объект(setSort(state, action: PayloadAction) если на TS писать), то приложение даже не компилируется(я час пытался пофиксить)
спасибо большое за твой труд! а этот урок, конкретно библиотека qs, спасла меня от вечера мучений :*
Даже прикрепленный код не помогает решить, не работает ничего
Отличный урок, делал фильтры по своему без усложнений ( по умному ) и на этом этапе не возникло никаких сложностей
Внимание! Приложение должно было бы сломаться так как в Апп.джс прописаны роуты и там так:
Урок мне понравился, это реально используется всё на проекте! У меня задача была кокраз с этим связана!
лично у меня главный вопрос зачем это делать? что то логику не пойму, для чего?
По желанию. Если не сделаешь хранение параметров в ссылке, приложение будет также работать
@@ArchakovBlog грубо говоря это показ возможностей navigate, я правильно понял?
Да и то, как можно из URL парсить фильтры
@Marat React босс уже ответил
Крутой урок !!! Конечно пришлось потратить время, чтобы понять логику но оно того стоило. Спасибо большое
Друзья, тупо переписывать код - неправильно, учитесь ориентироваться во flux-архитектуре, откуда приходит, как вызывается, где отрабатывает и т.д.
Почему то с этим уроком больше всего ошибок нахватал