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
920
NgRx v8を使ってみよう
https://ng-fukuoka.connpass.com/event/144382/
puku0x
September 11, 2019
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
1
100
ファインディでのGitHub Actions活用事例
puku0x
9
2.1k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
390
Findyの開発生産性を上げるためにやったこと
puku0x
1
510
Angularコーディングスタイルガイドはいいぞ
puku0x
1
210
Nx CloudでCIを爆速にした話
puku0x
0
660
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
740
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.3k
Other Decks in Technology
See All in Technology
Grafana エコシステムの活用事例 on ABEMA
tetsuya28
4
260
CData Virtuality 日本ローンチイベントのKeynote
cdataj
0
230
【完全版】Dify - LINE Bot連携 考え方と実用テクニック
uezo
2
430
テクニカルライターのチームで「目標」をどう決めたか / MVV for a Team of Technical Writers
lycorptech_jp
PRO
3
100
Low Latency Join Method for Distributed DBMS
yugabytejapan
0
180
今こそ変化対応力を向上させるとき 〜ログラスが FAST に挑戦する理由〜 / Why Loglass is Talking on the Challenge of Agile Framework FAST
shioyang
0
110
コード✕AIーソフトウェア開発者のための生成AI実践入門~
yuhattor
4
850
【shownet.conf_】ShowNet伝送改めShowNet APN 2024
shownet
PRO
0
460
Deno Deploy で Web Cache API を 使えるようになったので試した知見
toranoana
1
110
O'Reilly Superstream: Building a RAG App to Chat with Your Data
pamelafox
0
120
Vespaを利用したテクいベクトル検索
szdr
2
180
入社半年(合計1年)でGoogle Cloud 認定を全冠した秘訣🤫
risatube
1
230
Featured
See All Featured
Scaling GitHub
holman
458
140k
Embracing the Ebb and Flow
colly
84
4.4k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
Code Review Best Practice
trishagee
62
16k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
25
660
Six Lessons from altMBA
skipperchong
26
3.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
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