You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/js/immutablejs.md
+44-17
Original file line number
Diff line number
Diff line change
@@ -11,66 +11,93 @@ for a good explanation of the more intricate benefits it has.
11
11
12
12
In our reducers, we make the initial state an immutable data structure with the
13
13
`fromJS` function. We pass it an object or an array, and it takes care of
14
-
converting it to a compatible one. (Note: the conversion is performed deeply so
15
-
that even arbitrarily nested arrays/objects are immutable stuctures too!)
14
+
converting it to a immutable data structure. (Note: the conversion is performed deeply so
15
+
that even arbitrarily nested arrays/objects are immutable structures too!)
16
16
17
17
```JS
18
18
import { fromJS } from'immutable';
19
19
20
20
constinitialState=fromJS({
21
-
myData:'Hello World!',
21
+
myData: {
22
+
message:'Hello World!'
23
+
},
22
24
});
23
25
```
24
26
25
-
To react to an incoming actions our reducers can use the `.set` and the `.setIn`
26
-
functions.
27
+
28
+
29
+
When a reducer is subscribed to an action and needs to return the new state they can do so by using setter methods such as [`.set`](https://facebook.github.io/immutable-js/docs/#/Map/set) and [`.update`](https://facebook.github.io/immutable-js/docs/#/Map/update) and [`.merge`](https://facebook.github.io/immutable-js/docs/#/Map/merge).
30
+
If the changing state data is nested, we can utilize the 'deep' versions of these setters: [`.setIn`](https://facebook.github.io/immutable-js/docs/#/Map/setIn) and [`.updateIn`](https://facebook.github.io/immutable-js/docs/#/Map/updateIn), [`.mergeIn`](https://facebook.github.io/immutable-js/docs/#/Map/mergeIn).
We use [`reselect`](./reselect.md) to efficiently cache our computed application
44
-
state. Since that state is now immutable, we need to use the `.get` and `.getIn`
50
+
state. Since that state is now immutable, we need to use the [`.get`](https://facebook.github.io/immutable-js/docs/#/Iterable/get) and [`.getIn`](https://facebook.github.io/immutable-js/docs/#/Iterable/getIn)
To learn more, check out [`reselect.md`](reselect.md)!
54
61
55
-
## Advanced Usage
56
-
57
-
ImmutableJS provide many immutable structures like `Map`, `Set` and `List`. But the downside to using ImmutableJS data structures is that they are not normal JavaScript data structures.
62
+
## Immutable Records
58
63
59
-
That means you must use getters to access properties : for instance you'll do `map.get("property")` instead of `map.property`, and `array.get(0)` instead of `array[0]`. It's not natural and your code becoming bigger, you finish by not knowing anymore if you are working with a JavaScript object or an Immutable one. While it's possible to be clear where you are using immutable objects, you still pass them through the system into places where it's not clear. This makes reasoning about functions harder.
64
+
ImmutableJS provides a number of immutable structures such as [`Map`](https://facebook.github.io/immutable-js/docs/#/Map), [`Set`](https://facebook.github.io/immutable-js/docs/#/Set) and [`List`](https://facebook.github.io/immutable-js/docs/#/List).
65
+
One drawback to these structures is that properties must be accessed via the getter methods (`.get` or `.getIn`) and cannot be accessed with dot notation as they would in a plain javascript object.
66
+
For instance you'll write `map.get('property')` instead of `object.property`, and `list.get(0)` instead of `array[0]`.
67
+
This can make your code a little harder to follow and requires you to be extra cautious when passing arguments or props to functions or components that try to access values with regular dot notation.
68
+
ImmutableJS's [`Record`](https://facebook.github.io/immutable-js/docs/#/Record) structure offers a solution to this issue.
60
69
61
-
The `Record` structure tries to get rid of this drawback. `Record` is like a `Map` whose shape is fixed : you can't later add a new property after the record is created. The benefit of `Record` is that you can now, along with others .get, .set and .merge methods, use the dot notation to access properties, which is a good point to write simpler code.
70
+
A `Record` is similar to a `Map` but has a fixed shape, meaning it's property keys are predefined and you can't later add a new property after the record is created. Attempting to set new properties will cause an error.
71
+
One benefit of `Record` is that you can now, along with other immutable read methods (.get, .set, .merge and so on), use the dot notation to access properties.
62
72
63
-
The creation of a record is less simple. You got to first create the `Record` shape. With the example above, to create your initial state, you'll write :
73
+
The creation of a record is less simple than simply calling `.toJS()`.
74
+
First, you have to define the `Record` shape. With the example above, to create your initial state, you'll write:
64
75
65
76
```JS
66
-
//the shape
77
+
// Defining the shape
67
78
constStateRecord=Record({
68
-
myData:'Hello World!',
79
+
myData: {
80
+
message:'Hello World!'
81
+
}
69
82
});
70
83
71
84
constinitialState=newStateRecord({}); // initialState is now a new StateRecord instance
72
-
// initialized with myData set by default as 'Hello World!'
85
+
// initialized with myData.message set by default as 'Hello World!'
73
86
```
74
87
75
-
Now, if you want to access `myData`, you can just write `state.myData` in your reducer code.
88
+
Now, if you want to access `myData`, you can just write `state.myData` in your reducer code and to access the `message` property you can write `state.myData.message` as you would in a plain javascript object.
89
+
90
+
### Gotchas of Using Records
91
+
92
+
Although dot notation can now be used to read properties the same does not apply to setting properties. Any attempts to set a property on a `Record` using dot notation will result in errors.
93
+
Instead setter methods ( `.set`, `.update`, `.merge`) should be used.
94
+
95
+
Certain properties can not be set on a record as they would conflict with the API. Consider the below example:
96
+
```JS
97
+
constProductRecord=Record({
98
+
type:'tshirt',
99
+
size:'small'
100
+
});
101
+
```
76
102
103
+
Because record.size is used to return the records count (similar to array.length), the above definition would throw an error.
0 commit comments