Примеры

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

Контр-Вэнилла

Запустите пример Контр-Вэнилла:

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

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

Он не требует системы сборки или фреймворка отображения и существует, чтобы показать API Redux в сыром виде, используемом с ES5.

Счётчик

Запустите пример Счётчик:

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

cd redux/examples/counter
npm install
npm start

open http://localhost:3000/

Или посетите песочницу.

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

Этот пример включает тесты.

Задачи

Запустите пример Задачи:

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

cd redux/examples/todos
npm install
npm start

open http://localhost:3000/

Или посетите песочницу.

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

Этот пример включает тесты.

Задачи с Отменить/Повторить

Запустите пример Задачи с Отменить/Повторить:

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

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

open http://localhost:3000/

Или посетите песочницу.

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

TodoMVC

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

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

cd redux/examples/todomvc
npm install
npm start

open http://localhost:3000/

Или посетите песочницу.

Это классический пример TodoMVC. Он здесь для сравнения, но охватывает те же моменты, что и пример Задачи.

Этот пример включает тесты.

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

Запустите пример Корзина покупок:

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

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

open http://localhost:3000/

Или посетите песочницу.

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

Деревовидное представление

Запустите пример Деревовидное представление:

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

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

open http://localhost:3000/

Или посетите песочницу.

Этот пример демонстрирует отображение глубоко вложенного дерева и представление его состояния в нормализованной форме, чтобы его было легко обновить из редьюсеров. Хорошая производительность отображения достигается за счет того, что контейнерные компоненты подписываются только на узлы дерева, которые они отображают.

Этот пример включает тесты.

Асинхронный

Запустите пример Асинхронный:

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

cd redux/examples/async
npm install
npm start

open http://localhost:3000/

Или посетите песочницу.

Этот пример включает чтение из асинхронного API, загрузку данных в ответ на ввод пользователя, отображение индикаторов загрузки, кеширование ответа и аннулирование кеша. Он использует middleware Redux Thunk для инкапсуляции асинхронных побочных эффектов.

Универсальное

Запустите пример Универсальное:

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

cd redux/examples/universal
npm install
npm start

open http://localhost:3000/

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

Реальный мир

Запустите пример Реальный мир:

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

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

open http://localhost:3000/

Или посетите песочницу.

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

Ещё Примеры

Вы можете найти больше примеров в Awesome Redux.