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
950
NgRx v8を使ってみよう
https://ng-fukuoka.connpass.com/event/144382/
puku0x
September 11, 2019
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
160
ファインディでのGitHub Actions活用事例
puku0x
9
2.8k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
400
Findyの開発生産性を上げるためにやったこと
puku0x
1
540
Angularコーディングスタイルガイドはいいぞ
puku0x
1
240
Nx CloudでCIを爆速にした話
puku0x
0
720
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
770
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.5k
Other Decks in Technology
See All in Technology
プロダクト開発を加速させるためのQA文化の築き方 / How to build QA culture to accelerate product development
mii3king
1
260
2024年にチャレンジしたことを振り返るぞ
mitchan
0
130
生成AIのガバナンスの全体像と現実解
fnifni
1
180
どちらを使う?GitHub or Azure DevOps Ver. 24H2
kkamegawa
0
720
Qiita埋め込み用スライド
naoki_0531
0
4.7k
podman_update_2024-12
orimanabu
1
270
LINEヤフーのフロントエンド組織・体制の紹介【24年12月】
lycorp_recruit_jp
0
530
バクラクのドキュメント解析技術と実データにおける課題 / layerx-ccc-winter-2024
shimacos
2
1.1k
OpenAIの蒸留機能(Model Distillation)を使用して運用中のLLMのコストを削減する取り組み
pharma_x_tech
4
550
新機能VPCリソースエンドポイント機能検証から得られた考察
duelist2020jp
0
220
TSKaigi 2024 の登壇から広がったコミュニティ活動について
tsukuha
0
160
AWS re:Invent 2024で発表された コードを書く開発者向け機能について
maruto
0
190
Featured
See All Featured
Building Your Own Lightsaber
phodgson
103
6.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
Statistics for Hackers
jakevdp
796
220k
Why Our Code Smells
bkeepers
PRO
335
57k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
How STYLIGHT went responsive
nonsquared
95
5.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
The Art of Programming - Codeland 2020
erikaheidi
53
13k
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