Тестовое задание на Angular. Установка redux и создание root store.

В данной статье настроим Redux в лице Ngrx и создадим Root Store.

После того, как мы добавили сервис для работы с хранилищем, можно создать сервисы по работе с сущностями Person, Building и Room.

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

Установим библиотеку Ngrx, запустив команду:

yarn add -D @ngrx/schematics
yarn add @ngrx/{store,effects,router-store,store-devtools}

Создадим RootStore, создав папку core/store/root.

Так как root store хранит в себе все фичи, по умолчанию добавим только routerState, который будет хранить навигацию в приложении.

В самом модуле подключим главный Store Ngrx, а также эффекты:

Также при создании Action’ов добавим небольшую утилиту, которая позволит привести все action’ы к виду:

{ type: string; payload: any }

Где type — это обычный тип action’а, а payload — объект, который хранит в себе все передаваемые значения в action.

И украдем немного кода, в частности реализацию оператора “fetch” из Nx. Он позволяет чуть более красиво работать с эффектами в Ngrx — data persistence.

https://github.com/nrwl/nx/blob/c0ce1ce65e76786a7dbf04583b80a2528923148f/packages/angular/src/runtime/nx/data-persistence.ts

А также небольшую утилиту для тестирования:

https://github.com/nrwl/nx/blob/c0ce1ce65e76786a7dbf04583b80a2528923148f/packages/angular/testing/src/testing-utils.ts

Все это есть в пакете Nx для Angular, но из-за двух функций тащить монорепозиторий нету смысла.

Ссылки

Вернуться к оглавлению — Введение.

Следующая статья — Создание логгера.

Предыдущая статья — Создание и управление localStorage’ем.

Все исходники на github/fafnur/barinb.

Fafnur/barinb

Группа в Medium: https://medium.com/fafnur
Группа в Vkontakte: https://vk.com/fafnur
Группа в Facebook: https://www.facebook.com/groups/fafnur/
Telegram канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
LinkedIn: https://www.linkedin.com/in/fafnur