14 - React + TypeScript / useReducer & useDispatch / React JS - Путь Самурая 2.0

React Middle+ Контент для спонсоров:
Тоже самое для патронов

Да, однозначно на новых проектах нам желательно использовать новейший интерфейс тех инструментов, которым мы пользуемся.
Классовые компоненты вот-вот станут историей React-а, аналогично в Redux происходят изменения и всё так же библиотека react-redux заменила свой connect (high order component) на хуки useSelector и useDispatch. Нужно использовать именно их, если вашей компоненте нужны данные из state или нужно что-то в этот state, скажем так, за-dispatch-ить.

На своих рабочих production-проектах не спешите сломя голову делать массовый рефакторинг. Всё как работало у вас, так и продолжит хорошо работать. Но если всё-таки вы по лезли в старый код, чтобы добавить какую-то новую фичу, имеет смысл попробовать провести refactoring. Ну а новые фичи, безусловно, строго рекомендуется уже сегодня писать, использя hook-и

Платное обучение в онлайн или оффлайн инкубаторе:

А здесь бесплатная взаимопомощь:

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

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

#useReducer #useDispatch #redux

0:00 философия про новые инструменты
2:55 контейнерные компоненты good bye (теория)
8:30 от connect к useSelector и useDispatch (практика)

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

[SohoCode]

у кого ошибка типа с dispatch, можно сделать так:


в reduxStore:
export type AppDispatch = ThunkDispatch<AppStateType, unknown, AnyAction>

в компоненте:
const dispatch: AppDispatch = useDispatch()

[Borashvili]

Как узнать программистов:
1. человек не моргает три минуты.
2. А потом сразу шесть раз
🤣💓

[brian_alex]

Если у кого переполняется стэк, когда пытаетесь сделать follow, unfollow, проверьте, откуда какой именно follow/unfollow вы передаете в dispatch, скорей всего вы передаете туда саму же функцию, а не импортированный follow/unfollow

[PoRoKLusT]

Спасибо за видео, учусь по нему.
Вычитал из доки:

useSelector можно типизировать следующем образом:
const reducer = combineReducers({ tasksReducer, filterStatusReducer });
export type Reducer = ReturnType<typeof reducer>

Потом создаем собственный типизированный хук на основе обычного useSelector:
import { TypedUseSelectorHook, useSelector } from "react-redux";
const useTypedSelector: TypedUseSelectorHook<Reducer> = useSelector;

В дальнейшем используем в приложении useTypedSelector() как обычно используем useSelector(). TS сразу будет показывать что передается в переменную без дополнительных манипуляций. Сделал, всё работает как задумано.

Чтобы типизировать useDispatch() нужно:
В месте где у нас создается store прописать export type AppDispatch = typeof store.dispatch
В компоненте прописать const dispatch: AppDispatch = useDispatch()

Теперь можно вызывать dispatch в компоненте как обычно с использованием экшена, например
Если у вас созданы и описаны экшены он их сам подтянет и будет отображать при наведении какой экшен вызывается, что принимает и возвращает.
Если в экшене описан только тип и нет payload, то в типизации экшена нужно добавить payload: null и в самом экшене тоже payload: null. По идее это лишнее и никак не скажется на коде, но без этого ts ругается.

[maxim.saharov]

лайк за таймлайны!)
И Димыч ИСПРАВЬ НАЗВАНИЕ ТЕМЫ - в уроке про useSelector, а в теме useReducer!
Даже картинка к видео правильная. И так же меня поразило как много людей накопипастили в коменты слово useReducer)

[lord]

готовимся к мидлам, а я даже не джун)

[VSJAQ]

Димыч, спасибо, что снимаешь видео даже в нынешних сложных обстоятельствах! Мини-бамблби крут! Как и ты ) Лучший урок React + TypeScript / useReducer & useDispatch

[Оленка-рн]

React + TypeScript + useReducer & useDispatch. Спасибо за наглядные примеры! В чем прелесть этого курса, так это масштаб, постоянные улучшения уже написанного, разнообразные подходы :)

[maxim.saharov]

Tакой рефакторинг супер! - ощущения облегчения - как будь то выкинул хлам с балкона и теперь все чисто и понятно)
У кого что то не получилось - добро пожаловать в мой гит репозиторий - там полностью рабочая версия лежит!

[mordred]

Димыч, хочу сказать спасибо вам за ваши уроки, ведь вы очень толково объясняете. Хоть я вряд ли сейчас могу устроится(мне 16), но программирование моё хобби, и этим я буду заниматься всегда

[fsslmyo]

Огромная благодарность за такой потрясающий материал!!! В названии видео я как понял вместо useReducer должно быть useSelector. Тема рефакторинга потрясающая, useSelector и useDispatch действительно помогают избавиться от лишних оберток и также опракидываний пропсов, + код становится более читабельным как по мне ) Летим в космос ! React + TypeScript

[belle-nastja]

useReducer(), useDispatch() - done!) Cпасибо за твой труд, Димыч, летим дальше!!

[bxrmrpg]

Димыч, спасибо тебе большое! Как обычно все супер понятно! Летим!

[ruslanla]

уже жду 3 сезон - хочется увидеть новое интро и новые треки от Димыча)))

[Natalia-ph]

Ура-ура, новый выпуск)) Я посмотрю его еще не скоро, но уверена, что он как и другие, просто бомбический 💥

[viktorshcheplyagin]

Ключевые слова: обожаю React, Typescript, Redux!!
Отсебятина: Спасибо большое за твои видео! И вообще, всем белорусским it-блогерам! На удаленке, часто, вы - единственное мое it-общество)
Критика: Дымыч, почему ты не пркдотвратил эпидемию макаронавируса в мире? Тыж самурай!

[AlexNesterov-fq]

Очередной выпуск и очередная крутая Наилучший курс по реакт!!!
useSelector - 🔥🔥🔥
useDispatch - 🚀🚀🚀
TypeScript - 😎😎😎

[ВладиславПузырев-юл]

После того как начал использовать хуки useSelector, useDispatch HOC'и кажутся такими громоздкими тем более если еще компоненты классовые. Спасибо за ролик!

[Артемий-чу]

Летим, React + TypeScript / useReducer & useDispatch / React JS - Путь Самурая 2.0

[piligrm_ua_]

спасибо, как обычно отличное обьяснение oб useSelector и useDispatch, летим! React+TypeScript