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 v8を使ってみよう
Search
puku0x
September 11, 2019
Technology
1
1.1k
NgRx v8を使ってみよう
https://ng-fukuoka.connpass.com/event/144382/
puku0x
September 11, 2019
Tweet
Share
More Decks by puku0x
See All by puku0x
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
420
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.2k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
230
ファインディでのGitHub Actions活用事例
puku0x
9
3.4k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
430
Findyの開発生産性を上げるためにやったこと
puku0x
1
610
Angularコーディングスタイルガイドはいいぞ
puku0x
1
360
Nx CloudでCIを爆速にした話
puku0x
0
880
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
Other Decks in Technology
See All in Technology
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
940
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
170
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
150
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
450
roppongirb_20250911
igaiga
1
240
エラーとアクセシビリティ
schktjm
1
1.3k
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1k
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
160
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
140
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
430
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
450
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Context Engineering - Making Every Token Count
addyosmani
3
46
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Unsuck your backbone
ammeep
671
58k
Building Adaptive Systems
keathley
43
2.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Writing Fast Ruby
sferik
628
62k
Music & Morning Musume
bryan
46
6.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Facilitating Awesome Meetings
lara
55
6.5k
Designing for Performance
lara
610
69k
Transcript
NgRx v8を使ってみよう Angularもくもく会 in Fukuoka #9
Noriyuki Shinpuku ng-fukuoka organizer VEGA corporation Co., Ltd. @puku0x
Angular
Full-fledged & opinionated Angular Protractor Forms PWA Augury Language Services
Router Elements CDK Universal Karma Labs Compiler i18n Http Material Animations CLI
State management?
RxJS
Basic state management • BehaviorSubject • ReplaySubject ◦ No initial
value ◦ No current value getter
BehaviorSubject import { Injectable } from '@angular/core'; import { BehaviorSubject
} from 'rxjs'; @Injectable({ providedIn: 'root' }) export class CouterService { private counter = new BehaviorSubject(0); // Initial value = 0 get counter$() { return this.counter.asObservable(); } increment() { const value = this.counter.getValue(); this.counter.next(value + 1); } }
ReplaySubject import { Injectable } from '@angular/core'; import { BehaviorSubject
} from 'rxjs'; @Injectable({ providedIn: 'root' }) export class CouterService { private counter = new ReplaySubject(1); // Buffer size = 1 get counter$() { return this.counter.asObservable(); } setCounter(value: number) { this.counter.next(value); } }
Complex state management?
None
NgRx • RxJS powered Redux for Angular • Type-safe and
performant • Community driven
None
Does it have many boilerplates?
NgRx v8 has less boilerplates!
https://blog.angularindepth.com/ngrx-action-creators-redesigned-d396960e46da
Action creator factory import { createAction, props } from '@ngrx/store';
export const increment = createAction( '[Counter] Increment' ); export const setValue = createAction( '[Counter] Set value, props<{ value: number }>() );
Reducer creator factory import { createReducer, on } from '@ngrx/store';
import { increment, setValue } from './counter.actions'; export const initialState = 0; const counterReducer = createReducer(initialState, on(increment, state => state + 1), // No more switch-case! on(setValue, (state, { value }) => value) );
Effect creator factory import { Actions, ofType, createEffect } from
'@ngrx/effects'; import { tap } from 'rxjs/operators'; import { setValue } from '../actions'; @Injectable() export class CounterEffects { constructor(private actions$: Actionn) {} setValue$ = createEffect(() => // No more @Effect decorator! this.actions$.pipe( ofType(setValue), tap(({ value }) => console.log(`${value}`)) ), { dispatch: false } );
Creator factories make NgRx simple!
Recap • NgRx provides Redux for Angular • Less boilerplate
with creator factories • Try it now! https://ngrx.io/ https://stackblitz.com/edit/ngrx-todo-v8
Thank you! @puku0x Noriyuki Shinpuku