Slide 1

Slide 1 text

U s i n g I m m u t a b l e . j s w i t h R e a c t R e d u x Ta k a s h i O g o m o r i

Slide 2

Slide 2 text

I m m u t a b l e c o l l e c t i o n s f o r J a v a S c r i p t I m m u t a b l e . j s

Slide 3

Slide 3 text

F a c e b o o k P ro j e c t s “Immutable data cannot be changed once created, leading to much simpler application de velopment, no defensive copying, and enabling advanced memoization techniques.”

Slide 4

Slide 4 text

Π ϛ ϡ ʔ λ ϒϧ ͷ σ ʔ λ ͸ Ұ ౓ ࡞ ੒ ͢ Δ ͱ ม ߋ Ͱ ͖ · ͤ Μ “Immutable data cannot be changed once create”

Slide 5

Slide 5 text

Ξ ϓ Ϧ έ ʔ γ ϣ ϯ ͷ ։ ൃ ͕ ඇ ৗ ʹ ؆ ୯ ʹ ͳ Γ · ͢ “leading to much simpler application development”

Slide 6

Slide 6 text

ϊʔ σΟϑ Σ ϯε ί ϐʔ Π ϯ ά “no defensive copying”

Slide 7

Slide 7 text

ͦ ͯ͠ɺ ߴ ౓ ͳ ϝϞ Խ ͷ ς Ϋϊ ϩ δʔ ͕ ༗ ޮ ʹ ͳ Γ · ͢ “and enabling advanced memoization techniques”

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

I n s t a l l i m m u t a b l e u s i n g n p m . npm install immutable

Slide 10

Slide 10 text

T h e n re q u i re i t i n t o a n y m o d u l e . i m p o r t { M a p } f r o m " i m m u t a b l e " ; c o n s t m a p 1 = M a p ( { a : 1 , b : 2 , c : 3 } ) ; c o n s t m a p 2 = m a p 1 . s e t ( ' b ' , 5 0 ) ; m a p 1 . g e t ( ' b ' ) ; / / 2 m a p 2 . g e t ( ' b ' ) ; / / 5 0

Slide 11

Slide 11 text

I m m u t a b l e d a t a s t r u c t u re s • List • Stack • Map • OrderedMap • Set • OrderedSet • Record

Slide 12

Slide 12 text

We d o n ' t m u t a t e t h e s t a t e / / O b e j e c t . a s s i g n O b j e c t . a s s i g n ( { } , m a p 1 , { a : 1 ) / / E S 2 0 1 5 { . . . m a p 1 , a : 1 } / / I m m u t a b l e . j s m a p 1 . s e t ( ' a ' , 1 )

Slide 13

Slide 13 text

U s i n g I m m u t a b l e . J S w i t h R e d u x

Slide 14

Slide 14 text

U s i n g I m m u t a b l e . J S w i t h R e a c t

Slide 15

Slide 15 text

• https://code.facebook.com/projects/web • https://facebook.github.io/immutable-js • https://facebook.github.io/react/ • http://redux.js.org