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
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
160
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
16k
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
510
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
250
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
160
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
Speed Design
sergeychernyshev
32
1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
We Have a Design System, Now What?
morganepeng
53
7.7k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Facilitating Awesome Meetings
lara
54
6.4k
A better future with KSS
kneath
238
17k
How GitHub (no longer) Works
holman
314
140k
The Invisible Side of Design
smashingmag
301
51k
Designing Experiences People Love
moore
142
24k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Thoughts on Productivity
jonyablonski
69
4.7k
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