Основы Redux (текстовый учебник, 2-е издание)

  • Tutorial

Прошло 2.5 года после публикации первой версии подробного туториала по основам Redux. За это время gitbook насчитал 200 000+ уникальных посетителей.


redux cover


Под катом подробнее об учебнике и список изменений.


Во-первых, это текст. С legacy.gitbook все еще можно скачивать в формате PDF/epub/mobi. В новой версии я эту опцию не нашел и, к сожалению, новая версия gitbook плохо работает без VPN.


Во-вторых — это такой же скупой на "воду" учебник. Текст, картинки, исходный код.


В процессе обучения описывается создание простого приложения, которое взаимодействует с VK API: загружаются ваши фото, а затем по годам показываются на странице, отсортированные по лайкам.


redux app scheme


Цель данного учебника: познакомить с Redux тех, кто уже знаком с React. Если вам нужно разобраться в основах React, посмотрите здесь.


Где?


Скачать для оффлайна или читать в онлайне — legacy.gitbook


Так как у gitbook могут быть проблемы с доступностью, версия 2.0.0 выложена на Yandex.Disk (PDF/ePub/mobi)


Чему вы научитесь в процессе обучения?


  • Основам создания SPA-приложения на React;
  • Грамотно готовить Redux-приложение (однонаправленный поток данных);
  • Выполнять асинхронные запросы (прелоадер, обработка ошибок) с помощью стандартного redux-thunk;
  • Взаимодействовать со сторонними API (на примере VK API);
  • Работать с документацией (по-желанию);
  • Оптимизировать перерисовки компонентов;

Что было обновлено:


  • React 16.4, Redux 4.0
  • Исходный код (полностью)
  • Текст (частично + новые разделы)
  • Скриншоты (полностью)

Бесплатно, значит так себе...


Начните читать, убедитесь в обратном. В учебнике учтен опыт консультирования и как уже было сказано, первое издание зашло на ура.


Как сделать книгу лучше?


Это же open-source, друзья. У гитбука удобный интерфейс отправки ошибки. Выделили текст, отправили исправление/пожелание/замечание.




Успехов в обучении. Туториал по React-Router обновлять не планирую.


Если хотите продолжить изучение React по моим материалам, заходите в профиль там есть дополнительная информация.

  • +20
  • 11.5k
  • 8
Support the author
Share post

Similar posts

Comments 8

    +1
    Большое спасибо за ваш труд!
      0
      Отличная работа! Есть чем заняться на выходных)
        0
        К сожалению, уже не актуально для меня. Через тернистый путь, как-то изучил эту библиотеку. Но, в любом случае спасибо за Ваши труды. Особенно за первую часть.
          0
          Большое спасибо за книгу, но есть вопрос-замечание:

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

          Потому что например у меня есть проект на чистом реакте, и я хочу перевести его на редакс:

          В состоянии есть свойство data, содержащее обычные табличные строки с данными, то есть массив объектов, и есть свойство dataStructure, где эти данные представлены иерархически с группировками, нужной сортировкой и рассчитанными итогами по колонкам…

          И вот в моем проекте есть функция changeDataValue(row, column, newValue), куда передается строка, что уже неудобно, потому что сделав копию мне придется найти эту строку в копии

          Хорошо, я проиндексирую строки и пишу

          const {data} = [...this.state] //скопировали
          row = data[row.index] //Нашли нужную строку в копии
          row[column.path] = newValue //Установили значение


          но теперь мне нужно пересчитать итоги по группировке, группировка находится в row.parent и ссылается это свойство на строку из dataStructure, то есть после
          row.parent[column.path] += newValue - oldValue


          получается измененным свойство dataStructure, И здесь возникает вопрос на что это может повлиять. Копировать dataStructure с его двусторонними связями children и parent как-то не очень хочется. Это может быть и долго на тысячах строк данных и муторно алгоритмически и не очень понятно зачем.

          PS И замените пожалуйста «так же» на «также», потому что в том контексте, в котором это используется в книге, нужно писать слитно. «Также» — тоже, кроме того, «Так же» — таким же образом. Когда вы пишете «Мы изменили page.js, так же изменим App.js» это означает, что в App.js нужно внести изменения аналогичные изменениям page.js, что противоречит контексту. Я не грамма-наци, когда это встречается в статьях — легко пропускаешь мимо глаз, но в книге это бросается в глаза.

            0
            Если я правильно понял ваш комментарий, то менять state нельзя по причине того, что это «3rd Redux principle» — нельзя изменять данные напрямую, вашему store нужно передавать новое состояние, полностью, даже если мы добавили в список просто новый элемент в конец, то мы должны передать новый список, который имеет вид "(… элемент_1, элемент_2, новый_элемент)".
              +1
              Говоря простым языком, если не возвращать «новый объект» — то компонент не будет перерисован, так как «redux» не поймет, что его нужно перерисовать.
                0
                Отличный ответ. Чаще на этот вопрос начинают разводить турусы на колесах про глубинный смысл, функицональный подход и чистоту объектов. С ужасом думаю как отвечать на такой вопрос при случае на собеседовании.
                  +1
                  Я понимаю, я просто обратил внимание на то, что из книги это не очевидно. Там просто нельзя и все тут, что как мне кажется не очень педагогично.

              Only users with full accounts can post comments. Log in, please.