08 - Todolist React JS - reducer, unit test

Поделиться
HTML-код
  • Опубликовано: 28 окт 2024

Комментарии • 90

  • @lisaborysenko7249
    @lisaborysenko7249 3 месяца назад

    очень нравится тудулист, достаточно доходчиво все обьясняется!

  • @АндрейДомарацкий-ц6й

    Димыч. респект тебе. Но старайся моргать чаще... береги здоровье

  • @ЖеняМельник-о2г
    @ЖеняМельник-о2г 21 день назад

    Надо выпустить отдельный плейлист со всеми песнями😊 Димыча

  • @igetout
    @igetout 2 месяца назад

    Спасибо за твой труд, Димыч)

  • @vovazaitsev2119
    @vovazaitsev2119 7 месяцев назад +1

    Спасибо за ваш труд

  • @asmodeus7862
    @asmodeus7862 7 месяцев назад

    Топим вперед!
    С отличным настроением;)

  • @ДимаБереговой-е9г
    @ДимаБереговой-е9г 11 месяцев назад

    Очень хороште уроки, спасибо за труды. Смотрю этот курс так, для саморазвития на фоне, тк работаю вью разработчиком. Очень хорошо, что учишь опираться на данные. Это наверное самая частая ошибка джунов. Когда идет верстка а потом кое-как натянуть туда данные. Успехов в твоих трудах!

  • @igorstadnik707
    @igorstadnik707 11 месяцев назад +4

    Ребят, вижу видео смотрят а лайков и комментов очень мало. Один момент, у айтишника должно быть одно такое качество как внимание к деталям, так вот мы как айтишники лучше других понимаем логику почему важно ставить лайкать, писать комментарии. Будь внимательным к деталям айтишником ;)

  • @Awe88Some
    @Awe88Some Год назад +2

    что за пушка................................ Дима, спасибо, благодаря твоим объяснениям, появилась вера в себя ,в свои знания, я стал понимать не только реакт, но и тайпскрипт, редакс, я уже могу, пожалуй, пробовать бомбить собеседования с ноября.... я верю, что найду работу, я стану программистом! у меня получится! у всех получится! бомбим, бомбим, бомбим!

    • @ITKAMASUTRA
      @ITKAMASUTRA  Год назад

      успехов!!! круто

    • @Awe88Some
      @Awe88Some Год назад +1

      спасибо!@@ITKAMASUTRA по-тихоньку, подкрепляю знания, составляю резюме и пробую, пробую, пробую) знай, ты внёс огромный вклад во всё это дерьмо, что сейчас происходит с моей менталкой ахахах я справлюсь со всем, как устроюсь на первую работу, закрою кредит, который брал на обучение и обязательно найду, как тебя отблагодарить, куда задонатить)))

  • @Natalia-zx6nl
    @Natalia-zx6nl Год назад

    очень нравится контент! Дмитрий, спасибо большое!!! лайк для продвижения и следующих видео!

  • @igorstadnik707
    @igorstadnik707 11 месяцев назад

    спасибо большое, реально крутой курс. Хорошо усваивается материал. Спасибо Димыч..

  • @johna6436
    @johna6436 8 месяцев назад

    "Это очень круто!"
    Спасибо!

  • @АзатХасанов-ш7т
    @АзатХасанов-ш7т 9 месяцев назад

    Полезный контент как и соц.сеть - спасибо )

  • @vendemiansparkle7163
    @vendemiansparkle7163 Год назад

    Дима, спасибо тебе за твои обучающие видео, за твой доступный язык обучения, все подробные объяснения, за твою мотивацию, за то, что ты есть!!! смотрю и повторяю, что ты делаешь, развиваюсь и учусь у тебя, намерена стать реакт-разработчицей! летим :3

  • @rossoneri902
    @rossoneri902 7 месяцев назад

    спасибо, Дима

  • @AntonZubko
    @AntonZubko 11 месяцев назад

    Димыч,спасибо за очередной крутой урок!!React js,reducer,unit test!!!летим в космос!!!!

  • @СветланаАндреевна-х8р
    @СветланаАндреевна-х8р 8 месяцев назад

    спасибо за ваши советы, очень полезно.

  • @ГармонистВитюша

    Димон, ты ракета!!!

  • @ВадімПошук
    @ВадімПошук Год назад

    Дякую, дуже довго чекав

  • @talaevleonid696
    @talaevleonid696 5 месяцев назад

    Летим к звездам)
    Пишем лайки и ставим комменты ))

  • @yersainaldabayev8836
    @yersainaldabayev8836 Год назад

    Спасибо что развиваешь тему тестов Димыч! нужная вещь, надеюсь и дальше будет как ты говоришь джесты, шместы ))

  • @grigoralex406
    @grigoralex406 Год назад

    Уррааа! Новый ролик по todo list, наконец-то вышел)) Как всегда подробно разжевано и разложено по полочкам. Спасибо за урок!
    PS: Песенка получилась прикольная))

  • @ITKAMASUTRA
    @ITKAMASUTRA  Год назад

    Обучение в it-incubator.io/education/front-end
    Ссылки для репоста:
    vk.com/it.incubator?w=wall-107117869_1126
    facebook.com/100062937475628/posts/pfbid02T2UKKsW66R6f6FzJrAf58ScWS8bDEzkYKK8AhKD6NZ2xtufhf9pLVLF5LzdbXS31l/?mibextid=cr9u03
    ru.linkedin.com/posts/kuzyuberdin_01-todolist-react-js-%D0%BF%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D0%BA%D0%B0-js-%D0%BF%D0%BB%D0%B0%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D1%89%D0%B8%D0%BA-activity-7122505147766726657-LTrR
    x.com/itkamasutra/status/1716742179748470871?s=20

  • @user-nf5yc7xz9b
    @user-nf5yc7xz9b Год назад

    Но вот это красавчик , неужели Димыч возвращается , настоящий , не этот инфо цыган Дмитрич с видео про Джуниоров и кому сейчас сложно и все в таком духе , а настоящий , олдскульный Димыч самурай !!! С возвращением , ждем курс самурая 2.0

    • @ITKAMASUTRA
      @ITKAMASUTRA  Год назад

      никогда не был инфоцыганом! максимальное качественное обучение даём, максимально не ездим по ушам и не расскачиваем эмоции на принятие решения покупки!
      но если посыл был: где крутой бесплатный контент? то да.. его будет больше

    • @user-nf5yc7xz9b
      @user-nf5yc7xz9b Год назад +1

      @@ITKAMASUTRA я ж не в плане что ты людей обманываешь , я никогда такого не говорил про тебя ))) я имел ввиду что последнее время нет годного контента от тебя , а одни голосовые названия , как Исп инфоцагвни ))) ты красава как не крути , но последний ролик по туду был 3 мес назад , а ролик в котором просто говоришь довольно часто стали выходить ! А ты сам говорил что программирование можно выучить только практикой , а ее от тебя очень мало послнеее время ! Я за это говорю и не в коем случае не считаю тебя инфоцыганом в плохом смысле

  • @AmericanDragon134
    @AmericanDragon134 Год назад

    Spasibo za Dofamin Dimych

  • @aktotuttttt
    @aktotuttttt Год назад

    нука срочно налетели лайкосиков прожали и написали СПАСИБО БОЛЬШОЕ ЗА УМНЫЙ КОНТЕНТ! Госпаде! КАК ЖЕ Я ТЕБЯ ЖДАЛ! КАК ЖЕ Я ЛЮБЛЮ ВАШ КОНТЕНТ!
    Да я фронт, да я вьюшник, да я не пишу на работе в тайпскрипт, да я простой человечек никогда не пожмущий руку Димычу
    НО я искренне радуюсь новым видосикам! И люблю практиковаться вместе с тобой!
    С П А С И Б О!

    • @ITKAMASUTRA
      @ITKAMASUTRA  Год назад

      Ещё увидимся, мир тесен 🤝

  • @kelter1429
    @kelter1429 11 месяцев назад

    Димыч, спасибо на todolist

  • @lvan_lvanov
    @lvan_lvanov 11 месяцев назад +1

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

  • @nmsosin
    @nmsosin Год назад

    Урааа, заждались
    Лайкос не глядя)

  • @KralinRuslan
    @KralinRuslan Год назад

    как всегда респект, спасибо за труд!!!!

  • @arturg6771
    @arturg6771 11 месяцев назад

    Топ 👍

  • @Paul-x1i6y
    @Paul-x1i6y Год назад

    бомба, очень круто

  • @АлёнаКравченко-я6ь

    Димыч как всегда на высоте🔥🔥🔥

  • @nerdizay
    @nerdizay Год назад

    Вступление классное)

  • @nicholasdev1853
    @nicholasdev1853 Год назад +2

    Уже начал терять надежду и тут вот такой сюрприз.

  • @alexanderkomanov4151
    @alexanderkomanov4151 Год назад

    Спасибо!

  • @Артем-у1ъ6с
    @Артем-у1ъ6с Год назад

    Респект, лайк, репост, летим🔥🦾

  • @powersx1322
    @powersx1322 11 месяцев назад +3

    46:31
    Код который вставил Димыч
    import {todolistsReducer} from "./todolists-reducer";
    import {v1} from "uuid";
    import {TodolistType} from "../App";
    test('correct todolist should be removed', () => {
    let todolistId1 = v1();
    let todolistId2 = v1();

    const startState: Array = [
    {id: todolistId1, title: 'What to learn', filter: 'all'},
    {id: todolistId2, title: 'What to buy', filter: 'all'},
    ]

    const endState = todolistsReducer(startState, {type: 'REMOVE-TODOLIST', id: todolistId1})

    expect(endState.length).toBe(1);
    expect(endState[0].id).toBe(todolistId2);
    })

  • @ArtemMindsurfer
    @ArtemMindsurfer Год назад

    оо, ура!)

  • @powersx1322
    @powersx1322 11 месяцев назад +2

    1:06:18
    Димыч вставил типы
    export type RemoveTodolistActionType = {
    type: 'REMOVE-TODOLIST',
    id: string
    }
    export type AddTodolistActionType = {
    type: 'ADD-TODOLIST',
    title: string
    }
    export type ChangeTodolistTitleActionType = {
    type: 'CHANGE-TODOLIST-TITLE',
    id: string,
    title: string
    }
    export type ChangeTodolistFilterActionType = {
    type: 'CHANGE-TODOLIST-FILTER',
    id: string,
    filter: FilterValuesType
    }
    export type ActionsType = RemoveTodolistActionType | AddTodolistActionType | ChangeTodolistTitleActionType | ChangeTodolistFilterActionType

    • @ДимаБереговой-е9г
      @ДимаБереговой-е9г 11 месяцев назад

      Лучше уже так)
      export const ActionsType = 'REMOVE-TODOLIST' | 'ADD-TODOLIST' | 'CHANGE-TODOLIST-TITLE' | 'CHANGE-TODOLIST-FILTER'
      export type TodolistActionType = {
      type: ActionsType;
      id: string;
      filter?: FilterValuesType;
      }
      Наплодил много одинаковых типов)

  • @AibekM-x7v
    @AibekM-x7v 11 месяцев назад

    Все интересно, можно еще уроки

  • @johna6436
    @johna6436 Год назад

    Супер!

  • @MgddSprlv
    @MgddSprlv Год назад

    наконец-то

  • @Dmitrijserg
    @Dmitrijserg Год назад

    Туду рулит, инкубатор в топе

  • @QaZaQ_Stranger
    @QaZaQ_Stranger 9 месяцев назад

    Может кому-то поможет:
    5:53 Начало урока
    6:48 Концепция редьюсера (по русски функция преобразователь)
    8:34 Хуки реакта говорят а у нас есть ещё редьюсер который тоже может менять состояние не через разбросанные функции , а внутри редьюсера который вы укажите/опишите
    9:33 Концепции написания кода (Обычная и TDD)
    13:42 Ещё раз про РЕДЬЮСЕР! (чистая функция)
    15:20 так как два стейта то будет и два редьюсера (то есть цель -> разбросанные функции удалить и записать в switch case соотвествующего редьюсера)
    16:17 Создаем отдельную директорию (папку) стейт тут будем учиться/тренироваться на выдуманном userReducer файл формата расширения .ts так как будет хранить только данные и объекты (tsx хранит + html разметку(гибрид html+js) поэтому формата/расширения jsx (tsx)
    17:11 Синтаксис (шаблон) редьюсера который принимает два объекта, первый state второй action
    19:00 Пример использования reducer создаём типы type для state и action
    21:08 Объяснение [key:string] : any Вот пример type ActionType = { type: 'INCREMENT', amount: 1 };
    type ActionType = { type: 'SET_USER', user: { id: 1, name: 'John' } }; в данном случаи amount и user являются ключами строго со string типом, а вот any в данных случаях это 1 number тип и { id: 1, name: 'John' } тип объект
    24:02 Начинаем изучение теста/тестирование создаем файл с названием name.test.tsx синтаксис такой что надо в названии писать + .test.tsx в WEBSTROM(WS) такие вещи делаются проще но на VSCODE тоже есть плагины надо искать
    25:00 Синтаксис теста, тест это функция которая принимает первым параметром просто строку, а вторым стрелочную функцию которая и описывает действия.
    27:24 Запускаем тесты в автоматическом режиме (WS)
    35:29 Что нужно вернуть при вызове useReducer? Такой же тип что и state
    36:31 Пишем теперь наоборот, сначала ТЕСТ потом под него КОД (TDD метод)
    42:58 Теперь будем все функции выносить в редьюсеры функции по тудулистам в тудулист редьюсер , функции по таскам в таск редьюсер.
    1:03:28 80% это нахождение багов и 20% это написание кода
    1:05:01 Пишем/описываем каждый тип для того чтобы не ошибиться в коде в дальнейшем
    1:06:50 Пишем один union Тип для action
    1:10:14 Так как (когда пишем юнит тест) создаем отдельно action то необходимо решить проблему распознавания типа так как редьюсер воспринимает его как стринг а не как собственный тип, для это решение два способа 1) прописать как const пример const action = { type: 'CHANGE-TODOLIST-TITLE' as const, id: todolist, title: newTodolist} второй пример const action : ChangeTodolistFilterActionType = { type: 'CHANGE-TODOLIST-TITLE', id: todolist, title: newTodolist}
    1:13:14 Action Creator для чего мы их создаем? для того чтобы чётко передавать их в редьюсер, это функции которые нам создают и возвращают объекты, короче чтобы не писать в тестах полный объект можем его отдельно написать в самом редьюсере и просто импортировать код становится короче.
    1:28:05 Подведение итогов урока

  • @igorstadnik707
    @igorstadnik707 Год назад

    ура ❤ спасибо ❤

  • @PoRoKLusT
    @PoRoKLusT 11 месяцев назад +1

    Юнит тесты переоценены на фронте. Зачем они нужны? 1. Защитить свой код от изменений другими разработчиками - что мешает другим разработчикам переписать/дополнить тесты? 2. Проверить себя, чтобы тест вам подсветил ошибку - но вам ts и так покажет где ошибка, а если у вас настроена генерация типов ответов с бека, то и подавно. Добавить к этому единую и принятую архитектуру проекта в команде и единый стиль написания кода. Тесты становятся пустой тратой денег бизнеса.
    TTD еще имеет смысл, в таком случае во время написания тестов разработчик выстраивает для себя систему запросов и уже представляет что будет делать. Но еще ни разу не встречал чтобы в компании было принято TTD, у друзей тоже.

  • @gfhitdxaahn
    @gfhitdxaahn Год назад

    Здравствуйте, когда будет продолжение курса по бэкенду?

  • @ОлегТиновець
    @ОлегТиновець 10 месяцев назад

    👍

  • @jackson8460
    @jackson8460 Год назад +2

    Привет Димыч! Подскажи пожалуйста, какой уровень знания вёрстки должен быть у Frontend-разработчика? Должен ли Frontend-разработчик уметь верстать сайты абсолютно любой сложности или нет? Меня тут не лёгкая занесла на биржу фриланса, я там такие макеты видел - просто кошмарище. Я, наверное, только верстать буду учиться до пенсии (мне 26 лет). Также иногда мониторю вакансии и в требованиях к Frontend-разработчику есть пункт - знание HTML и CSS, но вот блин не написано на каком уровне их нужно знать, поэтому нужен твой совет.
    Также буду рад почитать мнения других людей. Спасибо!

    • @ITKAMASUTRA
      @ITKAMASUTRA  Год назад

      Если не умеешь круто кодить и тяжело в этом - придется очень круто верстать.
      Или если нравится верстать.
      Фронтендер должен знать хорошо вёрстку, но быстро, эффективно и массово верстать - это для верстальщиков.

    • @MrQuest888
      @MrQuest888 Год назад

      любой фронт обязан хорошо уметь верстать с адаптивом, научиться не сложно, месяца достаточно

    • @jackson8460
      @jackson8460 Год назад

      @@MrQuest888 а видео толковые по верстке можете посоветовать?

    • @MrQuest888
      @MrQuest888 Год назад +1

      @@jackson8460 я вёрстку начинал учить по видео с канала "фрилансер по жизни" но это было года 2 назад , потом как запомнил основу, находил на фигме себе шаблоны и самостоятельно верстал набивая руку

    • @jackson8460
      @jackson8460 Год назад

      @@MrQuest888 ооо фрилансер по жизни. Я как раз сейчас по его видео пытаюсь учить верстку, это просто кошмар какой-то. Он сначала напишет код потом вечно что-то удаляет, исправляет, переносит. Воды льёт столько что просто капец. Одну шапку сайта полтора часа верстает. 160 строк css кода только на header. Не понимаю как по его видео можно учиться, хотя может мне просто такое видео попалось.

  • @johna6436
    @johna6436 Год назад

    🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

  • @Easycore2000
    @Easycore2000 Год назад

    Вагон лайков этому господину! Надеюсь самурайский бек-енд тоже вернётся в поток. Где можно послушать песню из интро?)

  • @mikewazowski7526
    @mikewazowski7526 Год назад

    Дима, а выпускникам Инкубатора можно будет послушать CS курс?

    • @ITKAMASUTRA
      @ITKAMASUTRA  Год назад

      Будет выпускникам доступно в нашем dev клубе!
      Чтобы в него вступить - в ЛК инфа

  • @johna6436
    @johna6436 Год назад

    👍👍👍👍👍👍👍👍👍👍👍👍

  • @TheS68123
    @TheS68123 2 месяца назад

    Когда снимался урок, 5 лет назад?) Это даже не toolkit

    • @ITKAMASUTRA
      @ITKAMASUTRA  2 месяца назад

      Конечно, тулкит - это фасад над редаксом и внешне работает иначе, чтобы понимать суть, важно знать что внутри

  • @deyvidasb1769
    @deyvidasb1769 8 месяцев назад

    Почему бы не использовать объекты (классы) с методами, мне кажется так сложнее запутаться, есть сущность, у нее есть методы... С редьюсерами как-то все запутанно... данные в одном месте а то что их изменяет в другом... Я с питончика пришел поучится TS, наверное из-за этого и кажется неудобным такое решение (привык к классам и методам) сложно когда все на функциях держится... Уроки БОМБА! Спасибо Димыч! ))

    • @ITKAMASUTRA
      @ITKAMASUTRA  8 месяцев назад

      ООП vs функциональщина)) 2 парадигмы) я тоже люблю ООП

  • @qwertin1998
    @qwertin1998 Год назад

    Интересно, будет ли что-то сложнее туду листа?) Без негатива

    • @ITKAMASUTRA
      @ITKAMASUTRA  Год назад

      я в самом начале в ведении к этому видео подробно рассказываю об этом)))

  • @РусланПолянский-х7б

    Димыч, ну дай ты уже этот курс в доступ за платную подписку. Наверно не дождусь.

  • @elperdante
    @elperdante Год назад

    жесть я дожил до 8 части

    • @ITKAMASUTRA
      @ITKAMASUTRA  Год назад +1

      Скоро 9)) очень скоро

  • @tazalov
    @tazalov Год назад

    React JS - reducer, unit test

  • @Мария-ц8ъ2е
    @Мария-ц8ъ2е Год назад

    Я репозиторий удалила уже свой 😂

  • @bogdansereda7568
    @bogdansereda7568 Год назад

    Other courses don't come in after your pitch. Thank you. ReactJS/TS. TodoList.

  • @Рэд-н1ь
    @Рэд-н1ь Год назад

    А чего в Jira то учить? Не совсем понимаю... Удобная штука для контроля задач, к которой можно накинуть плагинов... А Kubernetes? Этож просто работа с контейнерами... Это если что не претензия или попытка как-то что-то оспорить, просто глубокого смысла в этих сервисах особо не вижу.

    • @ITKAMASUTRA
      @ITKAMASUTRA  Год назад +1

      С такого ракурса: а что там html - просто верстка… а React что там - просто удобная библиотека рендера UI, а что там rest api учить? Просто запросы :))) тоже не претензия)
      Когда оно всё вместе и на практике - у новичка крыша едет. Но именно в совокупности все эти сервисы и инструменты выделяют человека, который на продакшене не будет паниковать, теряться, а будет выполнять задачи

    • @Рэд-н1ь
      @Рэд-н1ь Год назад

      @@ITKAMASUTRA Хм, если смотреть на совокупность навыков да, соглашусь. Сам начинал с нуля и, возможно, слишком опрометчиво занизил важность этих вещей, если обернуться назад.

  • @johna6436
    @johna6436 Год назад

    Спасибо!