Перейти к основному содержимому
Неофициальный Бета-перевод

Эта страница переведена PageTurner AI (бета). Не одобрена официально проектом. Нашли ошибку? Сообщить о проблеме →

Ресурсы для изучения

Документация Redux предназначена для изучения базовых концепций Redux и объяснения ключевых принципов использования в реальных приложениях. Однако она не может охватить всё. К счастью, существует множество других отличных ресурсов для изучения Redux. Мы рекомендуем вам ознакомиться с ними. Многие из них раскрывают темы, выходящие за рамки документации, или объясняют те же концепции другими способами, которые могут лучше подойти вашему стилю обучения.

На этой странице представлены наши рекомендации по лучшим внешним ресурсам для изучения Redux. Дополнительный обширный список руководств, статей и других материалов по React, Redux, JavaScript и смежным темам вы найдёте в списке React/Redux Links.

Базовые введения​

Руководства, объясняющие базовые концепции Redux и его использование

  • Введение в React, Redux и TypeScript
    https://blog.isquaredsoftware.com/2020/12/presentations-react-redux-ts-intro/
    Презентация сопровождающего Redux Марка Эриксона, охватывающая основы React, Redux и TypeScript. Темы по Redux включают хранилища (stores), редьюсеры (reducers), промежуточное ПО (middleware), React-Redux и Redux Toolkit.

  • Изучаем современный Redux - Redux Toolkit, React-Redux Hooks и RTK Query
    https://www.learnwithjason.dev/let-s-learn-modern-redux
    Эпизод шоу "Learn with Jason" с участием сопровождающего Redux Марка Эриксона. В эпизоде демонстрируется разработка приложения в реальном времени: создание нового проекта React+TS, добавление пакетов Redux, настройка Redux Toolkit и React-Redux с нуля (включая рекомендованную конфигурацию хуков для TypeScript). Также показано использование API для получения данных RTK Query и отображение этих данных в интерфейсе.

  • Руководство по Redux: Обзор и пошаговое объяснение
    https://www.taniarascia.com/redux-react-guide/
    Качественное руководство от Тани Рашиа, которое кратко объясняет ключевые концепции Redux и показывает, как собрать базовое приложение Redux + React с использованием чистого Redux и Redux Toolkit.

  • Redux для начинающих - Понятное руководство по изучению Redux
    https://www.freecodecamp.org/news/redux-for-beginners-the-brain-friendly-guide-to-redux/
    Простое для понимания руководство по созданию небольшого приложения для списка дел с использованием Redux Toolkit и React-Redux, включая получение данных.

  • Redux становится проще с Redux Toolkit и TypeScript
    https://www.mattbutton.com/redux-made-easy-with-redux-toolkit-and-typescript/
    Полезное руководство, демонстрирующее совместное использование Redux Toolkit и TypeScript для написания приложений на Redux, а также показывающее, как RTK упрощает типичное использование Redux.

  • Redux: От хайпа в Twitter до продакшена
    https://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/
    Качественная презентация, визуально разбирающая основные концепции Redux, использование с React, организацию проекта и побочные эффекты с thunks и sagas. Содержит анимированные диаграммы, демонстрирующие поток данных в архитектуре React+Redux.

Использование Redux с React​

Объяснения библиотеки связок React-Redux

Проектные руководства​

Руководства, объясняющие концепции Redux через создание проектов, включая более сложные приложения, приближенные к реальным

  • Practical Redux
    https://blog.isquaredsoftware.com/2016/10/practical-redux-part-0-introduction/
    https://blog.isquaredsoftware.com/series/practical-redux/
    Постоянно обновляемая серия статей, демонстрирующая различные техники Redux на примере создания приложения, основанного на MekHQ для управления кампаниями в Battletech. Автор — со-мейнтейнер Redux Марк Эриксон. Рассматриваются темы: управление реляционными данными, подключение множества компонентов и списков, сложная логика редьюсеров для фич, работа с формами, отображение модальных окон и многое другое. (Примечание: это более старая серия, сегодня мы рекомендуем более новые паттерны для написания Redux-кода. Однако многие принципы из этой серии остаются ценными.)

Реализация Redux​

Объяснение внутренней работы Redux через создание минималистичных реплик

Редюсеры​

Статьи о подходах к написанию функций-редьюсеров

  • Taking Advantage of combineReducers
    https://randycoulman.com/blog/2016/11/22/taking-advantage-of-combinereducers/
    Примеры многократного использования combineReducers для построения дерева состояния и анализ компромиссов разных подходов к логике редьюсеров.

  • The Power of Higher-Order Reducers
    https://slides.com/omnidan/hor#/
    Презентация автора redux-undo и других библиотек, объясняющая концепцию редьюсеров высшего порядка и их применение.

  • Reducer composition with Higher Order Reducers
    https://medium.com/@mange_vibration/reducer-composition-with-higher-order-reducers-35c3977ed08f
    Отличные примеры создания небольших функций, которые можно композировать для решения сложных задач в редьюсерах: установка начального состояния, фильтрация, обновление конкретных ключей и др.

  • Higher Order Reducers - Это не так страшно, как кажется
    https://medium.com/@danielkagan/high-order-reducers-it-just-sounds-scary-2b9e5dbfc705
    Объясняет, как редьюсеры можно компоновать подобно Lego-кирпичикам для создания переиспользуемой и тестируемой логики.

Селекторы​

Объяснения как и зачем использовать функции-селекторы для чтения значений из состояния

  • Идиоматичный Redux: Использование селекторов Reselect для инкапсуляции и производительности
    https://blog.isquaredsoftware.com/2017/12/idiomatic-redux-using-reselect-selectors/
    Полное руководство о важности функций-селекторов в Redux, использовании библиотеки Reselect для написания оптимизированных селекторов и продвинутых техниках повышения производительности.

  • ReactCasts #8: Селекторы в Redux
    https://www.youtube.com/watch?v=frT3to2ACCw
    Отличный обзор причин и способов использования функций-селекторов для получения данных из хранилища и вычисления производных данных.

  • Оптимизация разработки React-Redux приложений с помощью Reselect
    https://codebrahma.com/reselect-tutorial-optimizing-react-redux-application-development-with-reselect/
    Хороший туториал по Reselect. Раскрывает концепцию "функций-селекторов", использование API Reselect и применение мемоизированных селекторов для улучшения производительности.

  • Использование Reselect в React-Redux приложениях
    https://dashbouquet.com/blog/frontend-development/usage-of-reselect-in-a-react-redux-application
    Обсуждает важность мемоизированных селекторов для производительности и лучшие практики использования Reselect.

  • React, Reselect и Redux
    https://medium.com/@parkerdan/react-reselect-and-redux-b34017f8194c
    Объясняет полезность мемоизированных селекторов Reselect в Redux-приложениях и создание уникальных экземпляров селекторов для каждого компонента.

Нормализация​

Как структурировать Redux-хранилище подобно базе данных для оптимальной производительности

  • Запросы к Redux-хранилищу
    https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f
    Обзор лучших практик организации и хранения данных в Redux, включая нормализацию данных и использование функций-селекторов.

  • Нормализация Redux-хранилищ для максимального переиспользования кода
    https://medium.com/@adamrackis/normalizing-redux-stores-for-maximum-code-reuse-ae6e3844ae95
    Размышления о том, как нормализованные Redux-хранилища позволяют реализовать полезные подходы к обработке данных, с примерами денормализации иерархических данных через селекторы.

  • Продвинутая нормализация сущностей в Redux
    https://medium.com/@dcousineau/advanced-redux-entity-normalization-f5f1fe2aefc5
    Описывает концепцию "keyWindow" для отслеживания подмножеств сущностей в состоянии, аналогично SQL "представлению". Полезное расширение идеи нормализованных данных.

Middleware​

Объяснения и примеры работы middleware и их создания

Побочные эффекты - основы​

Введение в обработку асинхронного поведения в Redux

Побочные эффекты - продвинутый уровень​

Продвинутые инструменты и техники управления асинхронным поведением

Философия Redux​

Глубокий анализ принципов работы Redux и его предназначения

  • Когда (и когда не) стоит использовать Redux
    https://changelog.com/posts/when-and-when-not-to-reach-for-redux
    Разработчик Redux Марк Эриксон объясняет проблемы, для решения которых создавался Redux, и сравнивает его с другими популярными инструментами.

Архитектура Redux​

Паттерны и практики структурирования крупных приложений на Redux

Приложения и примеры​

Переводы документации Redux​

Книги​

  • Redux на практике
    https://www.manning.com/books/redux-in-action
    Всеобъемлющая книга, охватывающая ключевые аспекты использования Redux: основы редюсеров и действий, интеграцию с React, сложные middleware и побочные эффекты, структуру приложений, производительность, тестирование и многое другое. Отлично объясняет плюсы, минусы и компромиссы различных подходов к использованию Redux. Лично рекомендована со-сопровождающим Redux Марком Эриксоном.

  • Полное руководство по Redux
    https://leanpub.com/redux-book
    Как управлять большим состоянием в продакшене? Зачем нужны store enhancers? Как лучше всего обрабатывать валидацию форм? Ответы на эти и многие другие вопросы с простыми объяснениями и примерами кода. Освойте всё необходимое для создания сложных production-готовых веб-приложений на Redux. (Примечание: теперь постоянно бесплатно!)

  • Управление состоянием в React
    https://www.robinwieruch.de/learn-react-redux-mobx-state-management/
    Идеальное продолжение книги автора "The Road to learn React". Вы начнёте с изучения Redux без React, затем научитесь подключать Redux к React-приложению. Продвинутые главы охватывают нормализацию, именование, селекторы и асинхронные действия. В финале вы создадите реальное приложение с React и Redux.

Курсы​

  • Современный React с Redux от Stephen Grider (платный)
    https://www.udemy.com/react-redux/
    Освойте основы React и Redux, создавая приложения с React Router, Webpack и ES2015. Курс быстро введёт в тему и даст глубокое понимание создания React-компонентов и структурирования приложений с Redux.

  • Redux от Tyler McGinnis (платный)
    https://tylermcginnis.com/courses/redux/
    Изучайте Redux в контексте достаточно крупного приложения, чтобы увидеть все преимущества. Этот курс — "Redux в реальном мире". Вы построите production-приложение, охватывающее оптимистичные обновления, обработку ошибок, интеграцию с Firebase и CSS Modules.

  • Изучаем Redux от Wes Bos (бесплатно)
    https://learnredux.com/
    Видеокурс по созданию фото-приложения "Reduxstagram", раскрывающий ключевые идеи Redux, React Router и React.js.

Дополнительные ресурсы​

  • React-Redux Links — каталог качественных статей и туториалов по React, Redux и ES2015.

  • Redux Ecosystem Links — тематическая подборка библиотек, аддонов и утилит для Redux.

  • Awesome Redux — обширный список репозиториев, связанных с Redux.

  • DEV Community — площадка для обсуждения проектов, статей и туториалов по Redux. Приветствуются разработчики любого уровня.