Пример использования redux ngrx

В этом уроке я расскажу Вам как можно начать работу с redux в angular (2+).

Установите Angular CLI как написано в инструкции т.е. наберите в консоли

Npm install –g @angular/cli (если у вас нет Npm установите его https://nodejs.org/en/)

Добавим файл helloReducer.ts и поместим следующий код

В данном случае у нас одно состояние (helloState) на один редьсер как добавить больше состояний покажу позже. В данном случае всё что делает редьюсер это просто добавляет слова hello world. Давайте протестируем как это будет выглядеть на деле.

Еще немного настроек. Перейдите в файл app.module.ts – наш стартовый модуль где начинается наше angular 2+ приложение. Добавьте в imports модуль StoreModule из библиотеки @ngrx/store и наш с вам единственный на данный момент редьюсер helloReducer.

Файл app.module.ts

Еще рекомендую добавить модуль, для тестирования который позволит нам запустить мощный инструмент для отслеживания работы Redux devtools chrome extention

Для этого добавим еще

StoreDevtoolsModule.instrumentOnlyWithExtension()

В итоге весь наш модуль теперь выглядит так

Файл app.module.ts

Теперь мы спокойно можем вызвать наш Store в любом компоненте.

Добавим store через механизм внедрения зависимостей. Обратите внимание что мы не задумываемся как всё это работает модули ngrx уже настроены под всё необходимое за нас.

Поэтому добавим три метода в компонент

Файл app.component.ts

А также реализуем их в представление

Файла app.component.html

Теперь просто запустим наше прилежание. Наберите команду

Давайте сразу откроем расширение для мониторинга работы redux devtools (Redux devtools chrome extention) в google chrome.

how start redux devtools chrome extention

Переключитесь на вкладку “state”

switch to state in redux devtools chrome extention

И мы увидим наше сообщения по умолчанию «Сорри тут пусто :(»

Нажмите последовательно на кнопки addHello, addworld, removeHelloWorld мы увидим в DevTools как меняется состояние.

how start redux devtools chrome extention 2

Здорово значит всё работает!

Но как отобразить данные изменения в представление. Подписываемся на изменения состояния в angular redux ngrx. Всё что нужно сделать это подписаться на изменения к нашему хранилищу или store. В конструкторе класса AppComponent добавьте инструкцию.

store.subscribe(result => this.title = result.msg)

В итоге файл app.component.ts

Запустим приложение. Как совместить работу redux ngrx и запросы к базе мы посмотрим в след. Статье.

Исходники тут  (https://github.com/rusrc/redux_with_ngrx_super_simple)

Comments are closed.