Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
NgRx v6 - Angularでの状態管理 -
Search
puku0x
September 27, 2018
Technology
1
390
NgRx v6 - Angularでの状態管理 -
Angular触ろうの会 in Fukuoka #6
puku0x
September 27, 2018
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
170
ファインディでのGitHub Actions活用事例
puku0x
9
3k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
410
Findyの開発生産性を上げるためにやったこと
puku0x
1
560
Angularコーディングスタイルガイドはいいぞ
puku0x
1
270
Nx CloudでCIを爆速にした話
puku0x
0
770
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
790
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.6k
Other Decks in Technology
See All in Technology
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
350
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
140
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
170
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
540
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
230
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
11k
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
1
340
Share my, our lessons from the road to re:Invent
naospon
0
140
技術スタックだけじゃない、業務ドメイン知識のオンボーディングも同じくらいの量が必要な話
niftycorp
PRO
0
100
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
120
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
340
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
182
22k
Code Review Best Practice
trishagee
67
18k
Git: the NoSQL Database
bkeepers
PRO
427
65k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Speed Design
sergeychernyshev
27
810
Rails Girls Zürich Keynote
gr2m
94
13k
How to train your dragon (web standard)
notwaldorf
91
5.9k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
How STYLIGHT went responsive
nonsquared
98
5.4k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Agile that works and the tools we love
rasmusluckow
328
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Transcript
NgRx v6 Angularでの状態管理
新福 宜侑 ng-fukuoka organizer Onsen UI collaborator @puku0x
@puku0x Angular 主にGoogleが開発するフロントエンドフレームワーク フルスタックなフレームワーク 状態管理の方法だけ公式で提供されていない (AngularにはRxJSがある...あとはわかるよね?的な)
@puku0x 状態管理 各コンポーネントでバラバラに状態を管理していると アプリケーションが大きくなったときに死ぬ 何かしらの仕組みが必要
Redux Reducer + Flux
@puku0x Redux 状態は一個のオブジェクト 状態は読み取り専用 状態は純粋な関数で変更される http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production
NgRx Reactive Extensions for Angular
@puku0x NgRx RxJSベースのRedux • Store • Action • Reducer •
Effects $ ng new my-app $ cd my-app $ npm install @ngrx/store $ npm install @ngrx/effects
@puku0x NgRx v6 RxJS v6対応 Pipeable operatorの利用(select & ofType) Angular
CLI v6の `ng add` & `ng update` 対応
Store 状態・データの置き場 export interface State { todos: Todo[]; loading: boolean;
} export const initialState: State { todos: [], loading: false, });
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 } ) {} }
export function reducer(state = initialState, action: TodoAction): State { switch
(action.type) { case TodoActionTypes.CreateTodo: { return { ...state, loading: true }; } default: { return state; } } } Reducer
@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
@puku0x 詳しくはWebで
@puku0x サンプルプログラム https://stackblitz.com/edit/ngrx-todo-v1
思ったより複雑かも...
@puku0x Facade Pattern https://medium.com/@thomasburleson_11450/ngrx-facades-better-state-management-82a04b9a1e39
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
@puku0x サンプルプログラム https://stackblitz.com/edit/ngrx-todo-v2
ボイラープレート多い問題
@puku0x NgRx helpers @ngrx/schematics @ngrx/entity ngrx-data
$ npm install @ngrx/schematics $ ng config cli.defaultCollection @ngrx/schematics $
ng g action todo $ ng g reducer @ngrx/schematics
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
export const entityMetadata: EntityMetadataMap = { Todo: {}, }; @NgModule({
imports: [ NgrxDataModule.forRoot({ entityMetadata }) ], }) export class AppStoreModule { } ngrx-data
@puku0x サンプルプログラム https://stackblitz.com/edit/ngrx-data-todo-v1
@puku0x まとめ NgRx v6からPipeable operator使うようになったので移行推奨 Facadeパターンよさそう ボイラープレートの削減は ngrx-data に期待(v7で統合される...?)
Thank you! @puku0x ng-fukuoka organizer