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
2
200
ファインディでのGitHub Actions活用事例
puku0x
9
3.3k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
420
Findyの開発生産性を上げるためにやったこと
puku0x
1
590
Angularコーディングスタイルガイドはいいぞ
puku0x
1
310
Nx CloudでCIを爆速にした話
puku0x
0
840
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
830
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.7k
Other Decks in Technology
See All in Technology
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
24k
AIに実況させる / AI Streamer
motemen
3
1.4k
アプリケーションの中身が見える!Mackerel APMの全貌と展望 / Mackerel APMリリースパーティ
mackerelio
0
440
カンファレンスのつくりかた / The Conference Code: What Makes It All Work
tomzoh
8
930
ITエンジニアを取り巻く環境とキャリアパス / A career path for Japanese IT engineers
takatama
4
1.5k
DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!
martin_lover
0
160
ゴリラ.vim #36 ~ Vim x SNS ~ スポンサーセッション
yasunori0418
1
350
データ戦略部門 紹介資料
sansan33
PRO
1
3.1k
mnt_data_とは?ChatGPTコード実行環境を深堀りしてみた
icck
0
210
大手企業のAIツール導入の壁を越えて:サイバーエージェントのCursor活用戦略
gunta
18
4k
コードの考古学 〜労務システムから発掘した成長の糧〜
kenta_smarthr
1
1.2k
AIとSREの未来 / AI and SRE
ymotongpoo
2
1.2k
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
How to Ace a Technical Interview
jacobian
276
23k
Faster Mobile Websites
deanohume
307
31k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
RailsConf 2023
tenderlove
30
1.1k
Side Projects
sachag
454
42k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
15
890
Writing Fast Ruby
sferik
628
61k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Cult of Friendly URLs
andyhume
78
6.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
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