Using Immutable.js with React Redux

Transcript

1. 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
2. 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
3. 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.”
4. Π ϛ ϡ ʔ λ ϒϧ ͷ σ ʔ λ ͸ Ұ ౓ ࡞ ੒ ͢ Δ ͱ ม ߋ Ͱ ͖ · ͤ Μ “Immutable data cannot be changed once create”
5. Ξ ϓ Ϧ έ ʔ γ ϣ ϯ ͷ ։ ൃ ͕ ඇ ৗ ʹ ؆ ୯ ʹ ͳ Γ · ͢ “leading to much simpler application development”
6. ϊʔ σΟϑ Σ ϯε ί ϐʔ Π ϯ ά “no defensive copying”
7. ͦ ͯ͠ɺ ߴ ౓ ͳ ϝϞ Խ ͷ ς Ϋϊ ϩ δʔ ͕ ༗ ޮ ʹ ͳ Γ · ͢ “and enabling advanced memoization techniques”
9. 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
10. 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
11. 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
12. 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 )
13. 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
14. 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
15. • https://code.facebook.com/projects/web • https://facebook.github.io/immutable-js • https://facebook.github.io/react/ • http://redux.js.org