42 - React JS Практика - Redux

🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT —INCUBATOR:

Front-end

Back-end

И вот мы подошли к важному - Redux!!! Наконец-таки! Дальше будем работать в связке React-Redux и оттачивать мастерство. Да, нам ещё предстоит подключение библиотеки react-redux, чтобы можно было забыть про ооп-шный store и использовать библиотеку в более простом варианте! Да, речь про функцию connect! Но это завтрашний день ;)

Удачи, друзья!

* Сайты:

* Мы в соц. сетях:

* Мои личные VK и Insta:

#reactJS #практика #примеры #уроки #курс

[АндрейКомаров-тх]

Свершилось!))) Redux - знать буду круто))) 04. 2024 - видео актуально по сей день

[ВладимирАкинин-тх]

Вообще, конечно Дмитрий ты молодец, сказать спасибо за уроки это самое малое, как можно тебя отблагодарить. Урок про подключение redux== просто замечательный, правда в 2022 году импортируем import {combineReducers, legacy_createStore as createStore} from "redux"; createStore иначе, но это фигня. Спасибо все разобрано, понято, гоним дальше!

[МихаилБереснев-дх]

Смотря с высоты 5 недели, Дмитрий - это талантливый преподаватель, потому что вести так плавно и объяснять шаг за шагом - это не каждый сможет(это ведь нужно было посидеть, придумать, какой план уроков, потом это вывести на презентацию, потом записать видос, смонтировать - титанический труд) - и залить бесплатно, вообще нет слов!
Кто смотрит первый раз - не расстраивайтесь, если что-то не получается или не работает, попробуйте еще раз, откатитесь на пару видосов - это нормально(возможно версии пакетов могут не совпадать с теми, которые используются сейчас, ведь при установке в настоящий момент чего либо, устанавливается последняя версия)
За себя могу сказать, что более детально понимается архитектура и как что работает. И почему Дмитрий ведет именно таким путем(сделайте так, потом нет, удаляем, редактируем) - просто нужно довериться и идти шаг за шагов, видео за видео. А тем временем уже 42% из 100%))
Когда строят дома - фундамент ведь заливают на века, а конструкцию можно обновить сколько хочешь - так и с этими выпусками.
Берет немного "позитивная" зависть от того, сколько же у Вас энергии, и Вы не жалеете её, отдаете частичку себя в эти выпуски, мотивируя нас зрителей.

[dimaivanov]

За 14 лет пользования интернетом, мой первый коммент и лайк на ютубе))
Какой же это ахрененный плей лист.
Раньше при изучении новых технологий, тупо переписывал за автором код, а потом долго и упорно пытался понять почему надо делать именно так.
Когда первый раз увидел этот плейлист, я немного очконул)) 101 видео, в среднем по пол часа, а мне хочется все изучить за 10, десяти минутных уроков)) Посмотрел несколько уроков и залип)) Если бы мне в школе так все объясняли, я точно бы закончил с золотой медалью, а если бы и в институте, то точно бы меня не выгнали из трех)))

В общем это лучшее что может быть, учился в geekbrains веб-разработке, за херову тьму денег, их обучение по сравнению с этим плейлистом, полная срань...

Автор, дай бог тебе здоровья, домик в Польше, два красных порше)))

[stianotesti]

Итак, пишу для тех, у кого НЕ работает, прошел ряд обновлений, теперь все выглядит немного иначе, я сам просидел дня два, чтобы сделать:
---
1. CreateStore устарел, об этом подскажет при импорте, оно будет перечеркнуто, нужно сделать install react toolkit, сейчас его используют (как точно пишется загуглите)
---
2. combineReducers делаем также let reducers = combineReducers({...}), потом вместо createStore пишем: let store = configureStore({reducer: reducers})т.к. он подразумевает на вход один уже объединенный reducer как я понял.
---
3. Не забываем передавать подписчику state как в видосе.
---
4. Все-равно не работает, т.к. прошло обновление, теперь нельзя менять объект, который к нам пришел в редьюсере, компилятор ругается, нужно создать копию, простым let newStore = store не отделаться (в js объекты не копируются, в этом случае newStore просто присвоится ссылка на store), нужно создать полный клон, JSONparse для этого лучше не использовать(криво клонируются многие объекты), либо самим делать "глубокое клонирование" рекурсией (смысла в этом нет, да и лень разбираться как), либо использовать structuredClone. Советую этот вариант. let newStore = structuredClone(store), затем все действия производим уже с newStore. Будет работать
---
4.1. У меня в массивах была jsx разметка, когда я присваивал аватарке картинку, типа: (ava: <img SRC='ссылка'>..). Такие объекты как я понял никто не умеет клонировать, кроме глубокого клонирования наверное, будет ошибка, что элемент не может быть клонирован, поэтому оставляйте ava: 'ссылка', а уже потом при маппинге оборачивайте ссылку в тэг. Некоторые другие элементы тоже могут не клонироваться, у меня не было такого, но такое есть, проверяйте ошибку.
---
5. Радуйтесь))) и все норм, это не вы тупые, а штука сложная, без гугления ошибок и комментов не сделать (я сам смотрел комменты)

[RUSHELP]

Смотрю и конспектирую - 2 февраля 2021 года!

[nurgissaadilakyn]

октябрь 2022
есть изменения в редаксе
1) import {combineReducers, legacy_createStore as createStore} from "redux";
2) Если у вас белый экран, не волнуйтесь. Проделайте все то, что сделал Димыч, под конец видео ошибка исправится

[dimalavrenov]

Божечки, насколько удобнее все стало. Осталось набить руку и параллельно добавлять свои фишки, чтобы не повторять за автором. У меня код отличается, и я дизайн немного добавил :) Спасибо за урок

[РудольфЛевченко]

Смотрю, очень круто розжовиваєш!
Мне 13 лет через полгода уже буду работать на фирме!!!

[vladimirt]

После этого урока нечего не понял и даже в голове все перемешалась, после 3-х просмотров всё стало на свои места так сказать по полочкам. И теперь круто когда через Redux что-то делаешь и ты знаешь что именно он делает под "капотом", прям крутяк. Правда не понятно как строить (контролировать) структуру внутри _state, но думаю дальше всё станет еще понятнее. Спасибо тебе Димыч, очень крутой курс.

[MikhailKuklenkov]

Ахренеть какой замес пошел! Это уже редакс по-взрослому пошел. Лайк, Дима)

[slavapush]

Ответственный момент) Именно Дима сделал его ответственным, в остальных уроках "за час" принимаешь как должное и запоминаешь правила, и только на таких курсах понимаешь всю мощь подключенных инструментов

[bukayosaka]

Третий раз пересматриваю, и только сейчас понял что происходит. Чуваки, кто не может сразу все в кучу собрать, не бойтесь и долбите ещё раз. Момент осознания когда улыбка на все лицо и возглас: -"ааааа вот оно что", стоит потраченных усилий)

[interpol]

Оставлю запись для будущих поколений в 2022году во всю используется Redux Toolkit, для вот этих целей прочтите официальную документацию Redux об этом, все достаточно просто написано. Переписал сам весь код на Redux Toolkit Спасибо отдельное автору, что до этого видео так хорошо разобрал архитектуру Redux!!!!
Вот код если кому нужен. Не совершайте моих ошибок в начале и не называете присваивание редюсеров именами переменны в

//store от redux
import DialogsReducer from "./Reducer/DialogsReducer";
import ProfileReducer from "./Reducer/ProfileReducer";
import SidBarReducer from "./Reducer/SidBarReducer";

//Обратите внимание, что это работает только для одного уровня вложенности.
// Если требуются вложенные редукторы, придется вызывать combineReducers() самостоятельно.

let store = configureStore({
reducer:{
dialogsPage:DialogsReducer,
profilePage:ProfileReducer,
sidBarPage:SidBarReducer,
}
})

export default store

[ДмитрийКибешев]

Димыч, спасибо большое!
Смотрю, учусь!

[maxk]

УРА!!! Redux!
До этого долгожданного Redux преодолел путь длиной в месяц! Уделял время учебе вечерами после работы.

[andreylopatin]

По ощущениям произошла какая то магия, надо будет пересматривать этот урок чтобы двигаться дальше

[Zhenkaaf]

18/05/2022

import {combineReducers, legacy_createStore as createStore} from "redux";
import dialogsReducer from './dialogsReducer';
import profileReducer from './profileReducer';
import friendsReducer from './friendsReducer';

let reducers = combineReducers({
messagesPage: dialogsReducer,
profilePage: profileReducer,
navbar: friendsReducer
});

let store = createStore(reducers);

export default store;

Первое, combineReducers должен собирать именно те названия, которые указаны у вас в store.js (или в state.js если не переименовали), messagesPage, profilePage, navbar, (это у меня так).
Второе, когда из store.js копируете данные для initialState, то нужно скопировать без названия раздела.

[theoty-js]

Смотрю и конспектирую. 20 января 2022года

[neverborin]

Кабзда просто. После таких нововведений всё в тартарары полетело. Из-за того, что я там всяких штучек понакрутил уже, у меня многое в коде отличается. Пол дня сидел дебажил, матерился, переделывал и прикручивал костыли. В общем, было очень интересно, погнали дальше :)))