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
1.3k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.3k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
230
ファインディでのGitHub Actions活用事例
puku0x
9
3.5k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
440
Findyの開発生産性を上げるためにやったこと
puku0x
1
610
Angularコーディングスタイルガイドはいいぞ
puku0x
1
360
Nx CloudでCIを爆速にした話
puku0x
0
890
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
Other Decks in Technology
See All in Technology
社内お問い合わせBotの仕組みと学び
nish01
0
350
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
530
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
180
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
970
stupid jj tricks
indirect
0
7.9k
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
170
LLM時代にデータエンジニアの役割はどう変わるか?
ikkimiyazaki
0
180
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
3.4k
o11yで育てる、強い内製開発組織
_awache
3
120
いまさら聞けない ABテスト入門
skmr2348
1
200
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
A Modern Web Designer's Workflow
chriscoyier
697
190k
The Invisible Side of Design
smashingmag
301
51k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Balancing Empowerment & Direction
lara
4
680
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Practical Orchestrator
shlominoach
190
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
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