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
570
Angularコーディングスタイルガイドはいいぞ
puku0x
1
270
Nx CloudでCIを爆速にした話
puku0x
0
780
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
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.6k
2025/3/1 公共交通オープンデータデイ2025
morohoshi
0
110
開発者体験を定量的に把握する手法と活用事例
ham0215
0
120
JavaにおけるNull非許容性
skrb
2
2.7k
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
530
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
9
4.1k
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.8k
MIMEと文字コードの闇
hirachan
2
1.5k
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
Platform Engineeringで クラウドの「楽しくない」を解消しよう
jacopen
4
190
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.6k
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
770
Featured
See All Featured
Scaling GitHub
holman
459
140k
Navigating Team Friction
lara
183
15k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
Unsuck your backbone
ammeep
669
57k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
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