Immutable State in Redux

I did a talk with a co-worker about Immutable.JS in Redux. These are the slides.

Transcript

1. Immutable State in React A L O V E S T O R Y
3. •E-commerce website #ContainerStoreTech Immutable State in React Tech @ The Container Store
4. •E-commerce website •POS software #ContainerStoreTech Immutable State in React Tech @ The Container Store
5. •E-commerce website •POS software •Inventory Management #ContainerStoreTech Immutable State in React Tech @ The Container Store
6. •E-commerce website •POS software •Inventory Management •Internal tools #ContainerStoreTech Immutable State in React Tech @ The Container Store
7. •E-commerce website •POS software •Inventory Management •Internal tools •More! #ContainerStoreTech Immutable State in React Tech @ The Container Store
8. Hackathons
12. http://bit.ly/tcs-hackathon
13. Continuous Improvement
14. REACT 101
15. Oreos
18. The People
20. Our Project: Design Center
23. Redux
25. •Store Redux Immutable State in React #ContainerStoreTech
26. •Store •Actions Redux Immutable State in React #ContainerStoreTech
27. •Store •Actions •Reducers Redux Immutable State in React #ContainerStoreTech
28. React-Redux
29. •connect() React-Redux Immutable State in React #ContainerStoreTech
30. •connect() •mapStateToProps() React-Redux Immutable State in React #ContainerStoreTech
31. •connect() •mapStateToProps() •mapDispatchToProps() React-Redux Immutable State in React #ContainerStoreTech
32. Immutable.js
33. What is immutability?
34. immutable [ih-myoo-tuh-buh l] adjective 1. not mutable; unchangeable; 
 changeless. "immutable". Dictionary.com Unabridged. Random House, Inc. 12 Mar. 2018. <Dictionary.com http://www.dictionary.com/browse/immutable>. What is immutability? Immutable State in React #ContainerStoreTech
35. Why immutability?
36. •Improved performance Why immutability? Immutable State in React #ContainerStoreTech
37. •Improved performance •Predictable, consistent
 structure of application data Why immutability? Immutable State in React #ContainerStoreTech
40. •Improved performance •Predictable, consistent
 structure of application data •Rich, well documented API
 (Immutable.JS) Why immutability? Immutable State in React #ContainerStoreTech
41. Immutable.js
42. •Built by Facebook Immutable.js #ContainerStoreTech Immutable State in React
43. #ContainerStoreTech Immutable State in React •Built by Facebook •No dependencies Immutable.js
44. #ContainerStoreTech Immutable State in React •Built by Facebook •No dependencies •JS-like API Immutable.js
45. •Built by Facebook •No dependencies •JS-like API •Performant with complex 
 objects #ContainerStoreTech Immutable State in React Immutable.js
46. Immutable’s API
47. Data Structures
48. •List •Map and Ordered Map •Set and Ordered Set •Stack #ContainerStoreTech Data Structures Immutable State in React
49. •List (think JS array) #ContainerStoreTech Data Structures Immutable State in React
50. •List (think JS array) •Map (think JS object) #ContainerStoreTech Data Structures Immutable State in React
51. •List (think JS array) •Map (think JS object) •Default data structures 
 when converting with 
 fromJS() #ContainerStoreTech Data Structures Immutable State in React
53. Getters and Setters
54. •Shallow (get, set, delete) #ContainerStoreTech Getters and Setters Immutable State in React
56. •Shallow (get, set, delete) •Deep (getIn, setIn, deleteIn) #ContainerStoreTech Getters and Setters Immutable State in React
58. •Shallow (get, set, delete) •Deep (getIn, setIn, deleteIn) •Callback Methods (update) #ContainerStoreTech Getters and Setters Immutable State in React
60. •List Methods (push, pop, 
 map, reduce, find, etc) #ContainerStoreTech Getters and Setters Immutable State in React
61. •List Methods (push, pop, 
 map, reduce, find, etc) •Map Methods (merge, 
 mergeIn, mergeDeep) #ContainerStoreTech Getters and Setters Immutable State in React
65. •List Methods (push, pop, 
 map, reduce, find, etc) •Map Methods (merge, 
 mergeIn) •Chainable #ContainerStoreTech Getters and Setters Immutable State in React
67. https://facebook.github.io/immutable-js/docs/
68. Immutable.js with Redux Best Practices
69. •Never mix plain JS objects 
 with Immutable.JS #ContainerStoreTech Immutable.js with Redux Best Practices Immutable State in React
71. •Never mix plain JS objects 
 with Immutable.JS •Make entire Redux state 
 an Immutable.JS object #ContainerStoreTech Immutable.js with Redux Best Practices Immutable State in React
73. •Never mix plain JS objects 
 with Immutable.JS •Make entire Redux state 
 an Immutable.JS object •Use Immutable.JS everywhere 
 except dumb components #ContainerStoreTech Immutable.js with Redux Best Practices Immutable State in React
75. immutableObj.toJS()
77. •Limit your use of toJS() #ContainerStoreTech Immutable.js with Redux Best Practices Immutable State in React
79. •Limit your use of toJS() •Never use toJS() in 
 mapStateToProps() #ContainerStoreTech Immutable.js with Redux Best Practices Immutable State in React
81. •Limit your use of toJS() •Never use toJS() in
 mapStateToProps() •Try to limit Immutable.js
 methods to reducers, use
 abstract methods elsewhere #ContainerStoreTech Immutable.js with Redux Best Practices Immutable State in React
82. Demo Time
83. Gotchas
84. •Can be more difficult 
 to debug #ContainerStoreTech Gotchas Immutable State in React
85. •Can be more difficult 
 to debug •No destructuring or spread
 operators #ContainerStoreTech Gotchas Immutable State in React
86. •Can be more difficult 
 to debug •No destructuring or spread
 operators •Not suitable for small values
 that change often #ContainerStoreTech Gotchas Immutable State in React
87. Thank You
88. Follow @CareersatTCS @ContainerStore @therealboone @andyasberry Demo Code http://bit.ly/2FCFEGT Door and Wall Rack Planner http://bit.ly/tcs-dwr