Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Using Immutable.js with React Redux

ogom
July 22, 2017

Using Immutable.js with React Redux

ogom

July 22, 2017
Tweet

More Decks by ogom

Other Decks in Programming

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. ͦ ͯ͠ɺ ߴ ౓ ͳ ϝϞ Խ ͷ ς Ϋϊ

    ϩ δʔ ͕ ༗ ޮ ʹ ͳ Γ · ͢ “and enabling advanced memoization techniques”
  7. 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
  8. 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
  9. 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
  10. 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 )
  11. 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
  12. 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