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

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

Примеры

Redux поставляется с несколькими примерами в своём исходном коде. Большинство из них также доступны на CodeSandbox — онлайн-редакторе, позволяющем экспериментировать с примерами прямо в браузере.

Counter на чистом JavaScript​

Запустите пример Counter Vanilla:

git clone https://github.com/reduxjs/redux.git

cd redux/examples/counter-vanilla
open index.html

Или откройте песочницу:

Этот пример не требует системы сборки или UI-фреймворка и демонстрирует использование базового Redux API с ES5.

Counter​

Запустите пример Counter:

git clone https://github.com/reduxjs/redux.git

cd redux/examples/counter
npm install
npm start

Или откройте песочницу:

Это простейший пример использования Redux с React. Для упрощения перерисовка React-компонентов выполняется вручную при изменении хранилища. В реальных проектах рекомендуется использовать высокопроизводительные привязки React Redux.

Пример включает тесты.

Список задач (Todos)​

Запустите пример Todos:

git clone https://github.com/reduxjs/redux.git

cd redux/examples/todos
npm install
npm start

Или откройте песочницу:

Этот пример лучше всего демонстрирует взаимодействие обновлений состояния с компонентами в Redux. Он показывает, как редюсеры могут делегировать обработку действий другим редюсерам, и как с помощью React Redux создавать компоненты-контейнеры на основе презентационных компонентов.

Пример включает тесты.

Список задач с отменой​

Запустите пример Todos with Undo:

git clone https://github.com/reduxjs/redux.git

cd redux/examples/todos-with-undo
npm install
npm start

Или откройте песочницу:

Эта вариация предыдущего примера практически идентична ему, но дополнительно показывает, как обёртка редюсера в Redux Undo позволяет добавить функциональность Undo/Redo в приложение всего несколькими строками кода.

TodoMVC​

Запустите пример TodoMVC:

git clone https://github.com/reduxjs/redux.git

cd redux/examples/todomvc
npm install
npm start

Или откройте песочницу:

Классический пример TodoMVC. Он приведён для сравнения, но охватывает те же аспекты, что и пример Todos.

Пример включает тесты.

Корзина покупок​

Запустите пример Shopping Cart:

git clone https://github.com/reduxjs/redux.git

cd redux/examples/shopping-cart
npm install
npm start

Или откройте песочницу:

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

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

Также демонстрируется:

  • Логирование с помощью Redux Logger
  • Условная диспетчеризация действий через middleware Redux Thunk

Иерархическое представление (Tree View)​

Запустите пример Tree View:

git clone https://github.com/reduxjs/redux.git

cd redux/examples/tree-view
npm install
npm start

Или изучите в песочнице:

В этом примере показаны:

  • Рендеринг глубоко вложенной древовидной структуры
  • Представление состояния в нормализованной форме для упрощения обновлений из редюсеров
  • Оптимизация производительности рендеринга за счёт точной подписки компонентов только на те узлы дерева, которые они отображают

Пример включает тесты.

Асинхронные операции (Async)​

Запустите пример Async:

git clone https://github.com/reduxjs/redux.git

cd redux/examples/async
npm install
npm start

Или изучите в песочнице:

Демонстрируются:

  • Чтение из асинхронного API
  • Загрузка данных по действию пользователя
  • Отображение индикаторов загрузки
  • Кэширование ответов и инвалидация кэша
  • Использование middleware Redux Thunk для инкапсуляции асинхронных побочных эффектов

Универсальное приложение (Universal)​

Запустите пример Universal:

git clone https://github.com/reduxjs/redux.git

cd redux/examples/universal
npm install
npm start

Базовый пример серверного рендеринга с использованием Redux и React. Показывает:

  • Подготовку начального состояния хранилища на сервере
  • Передачу состояния клиенту для инициализации клиентского хранилища

Реальный пример (Real World)​

Запустите пример Real World:

git clone https://github.com/reduxjs/redux.git

cd redux/examples/real-world
npm install
npm start

Или изучите в песочнице:

Самый продвинутый пример (намеренно насыщенный). Покрывает:

  • Хранение полученных сущностей в нормализованном кэше
  • Кастомное middleware для API-вызовов
  • Рендеринг частично загруженных данных
  • Пагинацию и кэширование ответов
  • Отображение сообщений об ошибках
  • Маршрутизацию
  • Интеграцию с Redux DevTools

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

Больше примеров можно найти в разделе Redux Apps and Examples каталога Redux Addons Catalog.