Основы хранилища NgRx
Основы управления состоянием с помощью NgRx.
«Основы хранилища NgRx» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 3 уроков всего.
Введение в хранилище NgRx
Основы хранилища NgRx
В этом уроке вы познакомитесь с NgRx — мощным решением для управления состоянием приложений Angular.
Что такое NgRx
Что такое NgRx
NgRx создан под влиянием Redux и помогает централизованно управлять состоянием в приложениях Angular, упрощая работу с данными между компонентами.
Зачем использовать NgRx
Зачем использовать NgRx
- Централизованное управление состоянием
- Понятный и предсказуемый поток данных
- Более удобные отладка и тестирование
Основные понятия
Основные понятия
NgRx включает несколько ключевых понятий:
- Store: хранит состояние приложения
- Actions: описывают события
- Reducers: обрабатывают переходы состояния
- Selectors: извлекают данные состояния
Установка хранилища NgRx
Установка хранилища NgRx
Установите NgRx с помощью npm:
npm install @ngrx/store --saveСоздание хранилища
Создание хранилища
Определите хранилище в модуле приложения:
StoreModule.forRoot({ appState: appReducer })Создание действий
Создание действий
Действия определяют события в приложении:
export const loadData = createAction('[App] Load Data');Редьюсеры
Редьюсеры
Редьюсеры обрабатывают изменения состояния, реагируя на действия и создавая новое состояние:
export const appReducer = createReducer(
initialState,
on(loadData, state => ({ ...state, loading: true }))
);Итоги работы с хранилищем NgRx
Итоги
Вы изучили основы использования хранилища NgRx для эффективного управления состоянием приложения. Отлично!
Часто задаваемые вопросы
Урок «Основы хранилища NgRx» бесплатный?
Да — полный текст урока «Основы хранилища NgRx» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 3 уроков всего.
Чему я научусь в уроке «Основы хранилища NgRx»?
Основы управления состоянием с помощью NgRx. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.
Сколько времени занимает урок «Основы хранилища NgRx»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Основы хранилища NgRx
- Действия и редукторы
- Селекторы и эффекты