NGRX Store + Effects

Усовершенствуйте реактивное и высокопроизводительное управления Redux для Angular приложений. Вам нужны предсказуемые, поддерживаемые и быстрые приложения. Вы будете управлять действиями, редюсерами, структурами данных с объектами, Memoized Selectors, паттернами Redux, побочными эффектами, неизменностью до предварительной загрузки, состоянием маршрутизатора и тестированием. Все в реальном это в реальном приложении.

Предпосылки

Убедитесь, что у вас установлено следующее:

Установите последнюю версию Node.js (Mac или Windows)

Пользователи Mac могут сделать brew install node, если у них установлен brew

Node Sass, если вы еще не установили его:

npm install -g node-sass

Redux Store Project

Репозиторий проекта или скачайте .zip и извлеките файлы где вам угодно на своей машине.

Шаг 1: Менеджер пакетов

Чтобы установить зависимости проекта, вам необходимо установить yarn. Если вы уже установили yarn, обязательно обновите его до последней версии. Чтобы установить yarn, запустите в своем терминале следующее:

npm install -g yarn 

Пользователи Mac могут использовать brew для установки yarn

brew update
brew install yarn

Шаг 2: Зависимости проекта

Теперь, когда у нас есть менеджер пакетов, мы можем установить зависимости проекта. Вы можете сделать это, запустив:

yarn install // or npm install 

это установит наши зависимости для запуска нашего Angular приложения.

Шаг 3: Запуск проекта

Во время разработки проект строится с использованием webpack-dev-server. Это обеспечивает локальный сервер разработки, а также позволяет перекомпилировать наше приложение при изменении файла. Проект также будет автоматически обновлять страницу всякий раз, когда мы вносим изменения.

Чтобы запустить проект в разработке, запустите:

yarn start // or npm run start 

Это даст некоторую информацию о проекте (например, версию TypeScript и прогресс сборки). После того, как вы увидите, что «сборка завершена», вы готовы писать код!

Откройте ваш браузер на localhost: 8000.

Redux Store: Seed

https://github.com/UltimateAngular/redux-store

NGRX App: Seed and Stepped Branches

https://github.com/UltimateAngular/ngrx-store-effects-app

Redux Store: Branches

Каждое видео имеет соответствующую ветку на GitHub.

• Branch 1: Store setup
• Branch 2: Dispatching Actions
• Branch 3: All about Reducers
• Branch 4: Store subscriptions
• Branch 5: Actions and Action Creators

NGRX Store + Effects: Seed (Project Branches) - Каждое видео имеет соответствующую ветку на GitHub.

• Branch 1: Action Constants and Creators
• Branch 2: Creating and Registering our Reducer
• Branch 3: State composition with Selectors
• Branch 4: Our first @Effect
• Branch 5: Optimizing Data Structures with Entities
• Branch 6: Hooking up @ngrx/router-store
• Branch 7: Custom Router State Serializers
• Branch 8: Router State and Entity Composition
• Branch 9: Further Action Creators
• Branch 10: Multiple Reducers
• Branch 11: Further Effects
• Branch 12: Selector Composition
• Branch 13: Mapping IDs to Entities
• Branch 14: Store Selectors and Async Pipe
• Branch 15: Creating, via Dispatch, Reducer and Effect
• Branch 16: Updating, via Dispatch, Reducer and Effect
• Branch 17: Deleting, via Dispatch, Reducer and Effect
• Branch 18: Router Actions and Effect
• Branch 19: Multiple Actions in Effects, Router Actions
• Branch 20: Preloading across multiple Routes
• Branch 21: Guards that check Store Entities
• Branch 22: One more Guard
• Branch 23: OnPush, everywhere
• Branch 24: Testing Actions
• Branch 25: Testing Reducers
• Branch 26: Testing Selectors
• Branch 27: Testing Effects