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
400
NgRx v6 - Angularでの状態管理 -
Angular触ろうの会 in Fukuoka #6
puku0x
September 27, 2018
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
210
ファインディでのGitHub Actions活用事例
puku0x
9
3.3k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
430
Findyの開発生産性を上げるためにやったこと
puku0x
1
590
Angularコーディングスタイルガイドはいいぞ
puku0x
1
330
Nx CloudでCIを爆速にした話
puku0x
0
850
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
850
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.8k
Other Decks in Technology
See All in Technology
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
130
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
470
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
6.9k
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
280
怖くない!はじめてのClaude Code
shinya337
0
400
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
21k
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
310
Featured
See All Featured
KATA
mclloyd
30
14k
Scaling GitHub
holman
460
140k
Balancing Empowerment & Direction
lara
1
430
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Statistics for Hackers
jakevdp
799
220k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Producing Creativity
orderedlist
PRO
346
40k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Language of Interfaces
destraynor
158
25k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Cult of Friendly URLs
andyhume
79
6.5k
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