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
370
NgRx v6 - Angularでの状態管理 -
Angular触ろうの会 in Fukuoka #6
puku0x
September 27, 2018
Tweet
Share
More Decks by puku0x
See All by puku0x
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
330
Findyの開発生産性を上げるためにやったこと
puku0x
1
420
Angularコーディングスタイルガイドはいいぞ
puku0x
1
120
Nx CloudでCIを爆速にした話
puku0x
0
500
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.5k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
690
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
1.7k
Nxはいいぞ
puku0x
0
630
Angularの静的サイトジェネレーター「Scully」の最新情報
puku0x
0
240
Other Decks in Technology
See All in Technology
HoneycombとOpenTelemetryでオブザーバビリティに入門してみる
sumiren
2
140
GitHub最新情報キャッチアップ 2024年3月
dzeyelid
16
3.1k
LLMプロダクト事業の立ち上げにおける挑戦
layerx
PRO
7
1.4k
エンジニアブランディングチームの KPI / KPI's of engineer branding team
chaspy
1
130
家族アルバム みてねで直面してきた技術的負債 / MIXI KAG 2024
isaoshimizu
17
7.7k
PG-Stromの性能評価レポート~ Star Schema Benchmark を例に~ / pgstrom_ssb_report_2024
sakaik
0
100
Getting started with controlling LEGO using Swift
hcrane
0
120
プッシュ型子育てサービスを、先行プロジェクト実施自治体において開始します
govtechtokyo
0
220
Cloud Deploy と仲良くなりたい
phaya72
1
100
戦略的DDDを実践するための跳躍力 / OOC 2024
pictiny
6
3.2k
エンジニア候補者向け資料2024.03.28.pdf
macloud
0
2.9k
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
210
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
Typedesign – Prime Four
hannesfritz
36
2k
Clear Off the Table
cherdarchuk
82
310k
Git: the NoSQL Database
bkeepers
PRO
421
63k
Code Reviewing Like a Champion
maltzj
512
39k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
RailsConf 2023
tenderlove
0
510
Six Lessons from altMBA
skipperchong
19
2.9k
How to name files
jennybc
62
92k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
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