Book Image

Mastering Immutable.js

By : Adam Boduch
Book Image

Mastering Immutable.js

By: Adam Boduch

Overview of this book

Immutable.js is a JavaScript library that will improve the robustness and dependability of your larger JavaScript projects. All aspects of the Immutable.js framework are covered in this book, and common JavaScript situations are examined in a hands-on way so that you gain practical experience using Immutable.js that you can apply across your own JavaScript projects. The key to building robust JavaScript applications using immutability is to control how data flows through your application, and how the side-effects of these flows are managed. Many problems that are difficult to pinpoint in large codebases stem from data that’s been mutated where it shouldn’t have been. With immutable data, you rule out an entire class of bugs. Mastering Immutable.js takes a practical, hands-on approach throughout, and shows you the ins and outs of the Immutable.js framework so that you can confidently build successful and dependable JavaScript projects.

Related Content you might be interested in

Current Title:

Small book image
Mastering Immutable.js
Adam Boduch
Sep, 2017 | 216 pages
No titles found
Table of Contents (23 chapters)
Title Page
Title Page
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Customer Feedback
Customer Feedback
Preface
Preface
Free Chapter
1
Why Immutable.js?
Why Immutable.js?
Mutations are destructive
The Immutable.js approach
Unidirectional data flow
Other libraries similar to Immutable.js
Summary
2
Creating Immutable Data
Creating Immutable Data
Immutable.js constructors
Using the of() method
Parsing data using the fromJS() function
Summary
3
Persistent Changes
Persistent Changes
Adding values to collections
Changing collection values
Removing values from collections
Emptying collections
Keeping track of changes
Summary
4
Filtering Collections and Finding Items
Filtering Collections and Finding Items
Filtering using simple comparisons
Filtering maps by keys
Finding collection values
Filtering using deep equality
Partial matches
Changing the search direction
Summary
5
Sequences and Side-Effects
Sequences and Side-Effects
Why lazy evaluation?
Sequence creation and iteration
Lazy filtering
Limiting results and reducing work
Summary
6
Sorting Collections
Sorting Collections
Sorting and reversing
Sorting lists of maps
Ordered maps
Sorting maps
Maintaining sort order
Summary
7
Mapping and Reducing
Mapping and Reducing
Mapping lists of maps
Mapping to new lists of maps
Reducing collections
Lazy mapping
Summary
8
Zipping and Flattening
Zipping and Flattening
Zipping collections
Flattening collections
Summary
9
Persistent Change Detection
Persistent Change Detection
Collection equality
Transformations versus mutations
Caching side-effects
Summary
10
Working with Sets
Working with Sets
Sets are not lists
Removing duplicates
Ordered sets
Maintaining sets
Summary
11
Comparing Collections
Comparing Collections
Set intersections
List intersections
Collection differences
Comparing maps
Subsets and supersets
Summary
12
Combining Collections
Combining Collections
Merging maps
Merging lists
Concatenating lists and sequences
Interposing and interleaving
Summary
13
Declarative Decision Making
Declarative Decision Making
Mapping behavior
Parameters and defaults
Composing behavior
Summary
14
Side-Effects in User Interfaces
Side-Effects in User Interfaces
A simple application
DOM side-effects
React side-effects
Summary
15
Side-Effects in Node.js
Side-Effects in Node.js
Reading data into collections
Writing collection data
Summary
16
Immutable Architecture
Immutable Architecture
The reusable application state updater
Initial application state
Events and state updaters
Executing side-effects
Summary

The reusable application state updater

To create a sustainable architecture for your Immutable.js code, you need a component that handles a few things:

  • It encapsulates the entire application state as one nested Immutable.js collection
  • It provides a mechanism for changing the application state by passing in a new Immutable.js collection
  • It runs side-effect functions every time the state changes

Such a component would be generic and useful enough so that you could use it in all of your Immutable.js applications. The idea is to enforce consistent side-effect behavior in response to state changes. Let's implement this component now.

Initial state

For lack of a better name, we'll call this component App(). In essence, it is the app since it holds all of the application state and all of the side-effects that control what the user sees. To start, we have to pass the component the initial state of our application. The initial state is used by side-effects to perform the initial render. Then, once the...

Previous Section
End of Section 2
Next Section