Immutable js reactmeetup_local_ppt
- 2. What is Immutable.js? • Provides immutable data structures with getters and setters • Persistent data: always yields new updated data. • Highly efficient, e.g: • List get & set O(log32 N), push & pop O(1) • Map get & set: O(log32 N)
- 3. What is Immutable.js? • Provides immutable data structures with getters and setters • Persistent data: always yields new updated data. • Highly efficient, e.g: • List get & set O(log32 N), push & pop O(1) • Map get & set: O(log32 N)
- 4. What is Immutable.js? • Provides immutable data structures with getters and setters • Persistent data: always yields new updated data. • Highly efficient, e.g: • List get & set O(log32 N), push & pop O(1) • Map get & set: O(log32 N) ~ Array O(N)
- 5. What is Immutable.js? • Provides immutable data structures with getters and setters • Persistent data: always yields new updated data. • Highly efficient, e.g: • List get & set O(log32 N), push & pop O(1) • Map get & set: O(log32 N) ~ Array O(N) ~ Object O(N)
- 7. List: Getters • has(): Boolean • includes(): Boolean • first(): List.size > 0 ? value : undefined
- 8. List: Setters •set(): changes item at index given (-1 changes the last value) •delete() (alias remove()): deletes item at index given •insert(): inserts item at the index given •clear(): empties the List •push(): appends items at the end •pop(): removes the last item •unshift(): inserts items at the start •shift(): removes first item •update(): updates items after some modifications have been made, useful for chaining •setSize(): adds or removes items from a list until the new list has the required size. If size < current size, items at higher indices are removed. If size > current size, undefined is appended at the higher indices until the required size is attained.
- 9. List: Setters •set(): changes item at index given (-1 changes the last value) •delete() (alias remove()): deletes item at index given •insert(): inserts item at the index given •clear(): empties the List •push(): appends items at the end •pop(): removes the last item •unshift(): inserts items at the start •shift(): removes first item •update(): updates items after some modifications have been made, useful for chaining •setSize(): adds or removes items from a list until the new list has the required size. If size < current size, items at higher indices are removed. If size > current size, undefined is appended at the higher indices until the required size is attained. New Lists are returned!
- 11. Map: Construction From (editable) immutable docs!
- 12. Map: Getters Shallow values: • get(): returns value with provided key if it exists, otherwise undefined • has(): Boolean • includes(): Boolean • first(): if non-empty, first element in collection, otherwise undefined • last(): if non-empty, last element in
- 13. Map: Setters Shallow setters: • set():Returns a new Map also containing the new key, value pair. If an equivalent key already exists in this Map, it will be replaced • delete(): returns a new Map that excludes the key • deleteAll(): returns a new Map that excludes the keys provided • clear(): returns a new Map with no keys or values • update():returns a new Map having updated the value at the key given after returning from some updating function, useful for chaining • merge(): merges the provided collection into the current Map, returning a new Map • mergeWith(): does the same thing as merge, but uses some merger function first (like division, multiplication etc).
- 14. Map: Setters cont. Shallow setters: • mergeDeep(): like merge but if two collections conflict, it uses recursive deep merging through the nested data • mergeDeepWith(): does the same thing as mergeDeep but uses a merging function Deep persistent changes: • setIn(): sets a value at the given keyPath • deleteIn(): removes value at the given keyPath • updateIn(): updates value at the given keyPath • mergeIn(): combination of updateIn() and merge() • mergeDeepIn(): combination of updateIn() and mergeDeep()
- 15. …and more • OrderedMap • Set • OrderedSet • Stack • Record • Seq • Collection
- 16. Why do we care anyway?
- 17. Why do we care anyway? Redux!
- 18. Why do we care anyway? • Immutable State • Pure reducers • Immutable data management => safer data handling • Time-travel debugging needs pure functions with no side effects to jump between different states Redux!
- 19. Why do we care anyway? • Immutable State • Pure reducers • Immutable data management => safer data handling • Time-travel debugging needs pure functions with no side effects to jump between different states Consistently return same output for given input Don’t alter input data Don’t depend on external state Redux!
- 20. From: React With Redux (Desert Code Camp 2018) Why do we use Redux again?
- 21. Why is immutability such a big deal in React with Redux? Use shallow equality checking for performance • CombineReducers (redux) -> shallowly checks for reference changes caused by the reducers that it calls. • Connect (react-redux) -> generates components that shallowly check reference changes to the root state, and the return values from the `mapStateToProps` function to see if the wrapped components actually need to re-render
- 22. Why is immutability such a big deal in React with Redux? Use shallow equality checking for performance • CombineReducers (redux) -> shallowly checks for reference changes caused by the reducers that it calls. • Connect (react-redux) -> generates components that shallowly check reference changes to the root state, and the return values from the `mapStateToProps` function to see if the wrapped components actually need to re-render ?
- 23. What is shallow equality checking? Equality by reference: Shallow equality checking
- 24. What is shallow equality checking? Equality by reference: Equality by value: Recursive, deep equality checking Shallow equality checking
- 25. The how…by example comparison • Main App (entry point) • Container • Reducer • Store • Root reducer
- 26. The how…by example comparison • Main App (entry point) • Container • Reducer • Store • Root reducer Without & with Immutable
- 41. Root Reducer (no Immutable)
- 60. Root Reducer (with Immutable)
- 61. Further Reading & Code • https://facebook.github.io/immutable-js/ • https://thomastuts.com/blog/immutable-js-101-maps- lists.html • https://github/TinaHeiligers/findmemore