Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using Immutable.js with React Redux

Avatar for ogom ogom
July 22, 2017

Using Immutable.js with React Redux

Avatar for ogom

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