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

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

    View full-size slide

  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

    View full-size slide

  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.”

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. 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

    View full-size slide

  9. 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

    View full-size slide

  10. 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

    View full-size slide

  11. 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 )

    View full-size slide

  12. 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

    View full-size slide

  13. 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

    View full-size slide

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

    View full-size slide