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