Примеры
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.