Примеры

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

Особенности при копировании

Если вы скопировали примеры Redux из их директорий, удалите эти строки из файлов webpack.config.js:

alias: {
  'redux': path.join(__dirname, '..', '..', 'src')
},

и

{
  test: /\.js$/,
  loaders: ['babel'],
  include: path.join(__dirname, '..', '..', 'src')
},

Иначе они будут пытаться вызвать Redux из родительской src папки и сборка сломается.

Счетчик

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

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

cd redux
npm install

cd examples/counter
npm install

npm start
open http://localhost:3000/

Это описывает:

  • Базовый шаблон разработки Redux;
  • Тестирование.

TodoMVC

Запуск TodoMVC:

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

cd redux
npm install

cd examples/todomvc
npm install

npm start
open http://localhost:3000/

Это описывает:

  • Базовый шаблон разработки Redux с двумя редьюсерами;
  • Обновление хранимой информации;
  • Тестирование.

Async

Запуск Async:

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

cd redux
npm install

cd examples/async
npm install

npm start
open http://localhost:3000/

Это описывает:

  • Базовый шаблон асинхронный разработки Redux с redux-thunk;
  • Кеширование запросов и вывод спиннера, пока данные подгружаются;
  • Инвалидирование закэшированных данных.

Real World

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

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

cd redux
npm install

cd examples/real-world
npm install

npm start
open http://localhost:3000/

Это описывает:

  • Real-world асинхронный Redux шаблон;
  • Сохрание объектов в упорядоченном кэше объектов;
  • Отдельный middleware для вызовов API;
  • Кеширование запросов и вывод спиннера, пока данные подгружаются;
  • Пагинация;
  • Роутинг.

Больше примеров

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