NgRx v6 - Angularでの状態管理 -

Angular触ろうの会 in Fukuoka #6

Transcript

1. NgRx v6 Angularでの状態管理
2. 新福 宜侑 ng-fukuoka organizer Onsen UI collaborator @puku0x
3. @puku0x Angular 主にGoogleが開発するフロントエンドフレームワーク フルスタックなフレームワーク 状態管理の方法だけ公式で提供されていない （AngularにはRxJSがある...あとはわかるよね？的な）
4. @puku0x 状態管理 各コンポーネントでバラバラに状態を管理していると アプリケーションが大きくなったときに死ぬ 何かしらの仕組みが必要
5. Redux Reducer + Flux
6. @puku0x Redux 状態は一個のオブジェクト 状態は読み取り専用 状態は純粋な関数で変更される http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production
7. NgRx Reactive Extensions for Angular
8. @puku0x NgRx RxJSベースのRedux • Store • Action • Reducer • Effects $ ng new my-app $ cd my-app $ npm install @ngrx/store $ npm install @ngrx/effects
9. @puku0x NgRx v6 RxJS v6対応 Pipeable operatorの利用（select & ofType） Angular CLI v6の `ng add` & `ng update` 対応
10. Store 状態・データの置き場 export interface State { todos: Todo[]; loading: boolean; } export const initialState: State { todos: [], loading: false, });
11. Action イベント export enum TodoActionTypes { CreateTodo = '[Todo] Create', CreateTodoSuccess = '[Todo] Create Success', } export class CreateTodo implements Action { readonly type = TodoActionTypes.CreateTodo; constructor(public payload: { todo: Todo } ) {} }
12. export function reducer(state = initialState, action: TodoAction): State { switch (action.type) { case TodoActionTypes.CreateTodo: { return { ...state, loading: true }; } default: { return state; } } } Reducer
13. @Effect() createTodo$: Observable<Action> = this.actions$.pipe( ofType<CreateTodo>(TodoActionTypes.CreateTodo), concatMap(action => { const { todo } = action.payload; return this.todoService.create(todo).pipe( map(result => new CreateTodoSuccess({ todo: result })), catchError(error => of(new CreateTodoFail({ error }))) ); }) ); Effects
14. @puku0x 詳しくはWebで
15. @puku0x サンプルプログラム https://stackblitz.com/edit/ngrx-todo-v1
16. 思ったより複雑かも...
17. @puku0x Facade Pattern https://medium.com/@thomasburleson_11450/ngrx-facades-better-state-management-82a04b9a1e39
18. export class TodoFacade { loading$ = this.store.pipe(select(todoQuery.getLoading)); todos$ = this.store.pipe(select(todoQuery.getTodos)); createSuccess$ = this.actions$.pipe(ofType<CreateTodoSuccess>(...)); create(todo: Todo) { this.store.dispatch(new CreateTodo({ todo })); } } Facade
19. @puku0x サンプルプログラム https://stackblitz.com/edit/ngrx-todo-v2
20. ボイラープレート多い問題
21. @puku0x NgRx helpers @ngrx/schematics @ngrx/entity ngrx-data
22. $ npm install @ngrx/schematics $ ng config cli.defaultCollection @ngrx/schematics $ ng g action todo $ ng g reducer @ngrx/schematics
23. import { EntityState, EntityAdapter, createEntityAdapter } from '@ngrx/entity'; export interface State extends EntityState<Todo> { } export const adapter: EntityAdapter<Todo> = createEntityAdapter<Todo>(); export const initialState: State = adapter.getInitialState({ }); export function reducer(state = initialState, action: TodoActions): State { switch (action.type) { case TodoActionTypes.CreateTodoSuccess: { return adapter.addOne(action.payload.todo, { ...state, loading: false }); } } @ngrx/entity
24. export const entityMetadata: EntityMetadataMap = { Todo: {}, }; @NgModule({ imports: [ NgrxDataModule.forRoot({ entityMetadata }) ], }) export class AppStoreModule { } ngrx-data
25. @puku0x サンプルプログラム https://stackblitz.com/edit/ngrx-data-todo-v1
26. @puku0x まとめ NgRx v6からPipeable operator使うようになったので移行推奨 Facadeパターンよさそう ボイラープレートの削減は ngrx-data に期待（v7で統合される...?）
27. Thank you! @puku0x ng-fukuoka organizer