redux angular · 2018-08-18 · Максим Иванов frontend developer, Синимекс...
TRANSCRIPT
Redux + Angular NGRX - NGXS - Akita
Максим ИвановFrontend Developer, СинимексFounder @Angular-RU на Github@splincode
Кирилл ЮсуповFrontend Developer, Синимекс@kyusupov33
Для кого мы разрабатываем на Angular
Основные вопросы
Немного статистики
Зачем намRedux в Angular?
Существующиереализации
Зачем нам Redux в Angular?
7
Дерево компонентов
Data-binding
One-way Two-wayOne-time
View Model
Первая инициализация в представлении без
последующих изменений
View Model
Изменения в представлении или
модели автоматически обновляют зависимость
View Model
Изменения в представлении никак не
влияют на модель, без обновления
8
// React (JSX)
<input value={this.state.data} onChange={this.handleChange} />
// Angular as React-like (one-way)
<input [ngModel]="data" (ngModelChange)="handleChange($event)">
Angular as React-like
9
10
Без Redux Redux
Концепция Redux
11
Component Action
create action
update state dispatchStore
Reducer
Create new state
12
React Fiber(отложенный рендеринг)
https://claudiopro.github.io/react-fiber-vs-stack-demo/fiber.html
13
DEMO
15
Концепция Flux
16
Component Action
create action
update state dispatchStore
Управление состоянием без регистрации и СМС1. Пишем свой класс Store.ts
который управляет потоком данных RxJS2. Пишем state-сервис, который инициализирует поток из Store.ts3. Инжектим state-сервис в компонентах
17
18
1. Пишем свой класс Store.ts
19
2. Пишем state-сервис
20
3. Инжектим state-сервис в компонентах
getState
Model
setState
21
А как же:
- Dev tools?- Logger?- CLI? - Immutable?
Существующие реализации паттернаRedux на Angular
23
Концепция
24
Component
Action
Reducer
dispatch
next Stateemit state
send
Subscribe
Store
25
Структура приложения
26
27
28
29
More features
1. @ngrx/effects2. @ngrx/router-store3. @ngrx/store-devtools4. @ngrx/entity5. @ngrx/schematics
30
Boilerplate class,
decorators
Концепция
31
Component Action
dispatch
select mutate
Service Server
Subscribe
Store
32
Структура приложения
33
1. @State2. @Selector3. @Actions4. Plugins
34
Первоначальные настройки
35
Первоначальные настройки
36
Первоначальные настройки
37
Первоначальные настройки
38
Selectors
39
Actions
40
Actions
41
42
Plugins
1. Logger2. DevTools3. Forms4. Storage5. Web socket6. Router
43
@ngxs/cli
45
Multiple data stores
Flux
Redux Observable Data Stores model.
Immutable updates
Концепция
46
Component
Actiondispatch
Service Service Server
Store
updates
Query
Query Query Query
streaming datarender
interacting with other queries
47
Component(s) Storeкак БД
низкоуровневые запросы
как в SQL
addupdatedelete
Query Service
Queries:READ..
CommandService
Commands:WRITE..
Упрощенная версия (чистый CQRS)
48
49
Структура приложения
DEMO
Немного статистики
Ключевые различия
Github-звезды 3.4k 1.3k 371
Boilerplate
Кривая обучения
Простота добавления и их покрытие кода тестами
Enterprise CQRS (aka Java)
Документация, материалы
CLI, Schematics, Plugins
Подходит лучше всего: for React bad-boys Middle Enterprise High Enterprise in Future52
Результаты
53
Хороший,Плохой,
Злой
STORE
55
СПАСИБО за внимание!Полезные материалы:https://github.com/Angular-RU/redux-demo