In this example, var a = {address: {postcode: 5085}} var d = Immutable.Map(a); Here, d.get(‘address’) is immutable. It’s value cannot change to any other objects. We can only create a new Object from the existing object using the Immutable.Map.set() function of ImmutableJS. But, the object referenced by d.get(‘address’) i.e, {postcode:5085} is a standard JavaScript object. … Read more
Ideally, never! If your Flux stores are using Immutable.js then try to maintain all the way through. Use React.addons.ReactComponentWithPureRenderMixin to achieve a memoization performance win (it adds a shouldComponentUpdate methods). When rendering, you may need to call toJS() as React v0.12.x only accepts Array as children: render: function () { return ( <div> {this.props.myImmutable.map(function (item) … Read more
There is an open ticket to improve the API which is on the roadmap for 4.0. Until this is implemented, I suggest you use Immutable.Iterable.isIterable() (docs). Using instanceof is not reliable (e. g. returns false when different modules use different copies of Immutable.js)
Maps in Immutable have a setIn method that makes it easy to set deep values: peopleImmutable = peopleImmutable.setIn([“Thomas”, “nickname”], “Mr. T”); Or, using split to generate the array: peopleImmutable = peopleImmutable.setIn(“Thomas.nickname”.split(“.”), “Mr. T”);
Taking your good example with Immutable import { ACTIVATE_LOCATION } from ‘./actions’; import { Map } from ‘immutable’; const initialState = Map({}) export let ui = (state = initialState, action) => { switch (action.type) { case ACTIVATE_LOCATION: return state.set(‘activeLocationId’, action.id); default: return state; } };
This is very common thing, and, actually, quite daunting. As far as I know, there is no really good and well-adopted solution in plain JS. Initially, Object.assign approach was used: return Object.assign({}, state, { categories: Object.assign({}, state.categories, { Professional: Object.assign({}, state.Professional, { active: true }) }) }); This is too straightforward and cumbersome, I admit … Read more
Personally I prefer the merge syntax, it feels more natural: const newContent = oldContext.merge({ “logged”: true, “error”: false }); If you were doing something very complex, maybe the transient version would be better, but I just can’t imagine where. It also means you can leverage mergeDeep if needed.
The most appropriate case is to use both findIndex and update methods. list = list.update( list.findIndex(function(item) { return item.get(“name”) === “third”; }), function(item) { return item.set(“count”, 4); } ); P.S. It’s not always possible to use Maps. E.g. if names are not unique and I want to update all items with the same names.
I have recently been researching the same topic. I’ll do my best to answer your question(s) and try to share what I have learned so far. The question is, why is immutability so important? What is wrong in mutating objects? Doesn’t it make things simple? Basically it comes down to the fact that immutability increases … Read more
You will be able to get the current iteration’s index for the map method through its 2nd parameter. Example: const list = [ ‘h’, ‘e’, ‘l’, ‘l’, ‘o’]; list.map((currElement, index) => { console.log(“The current iteration is: ” + index); console.log(“The current element is: ” + currElement); console.log(“\n”); return currElement; //equivalent to list[index] }); Output: The … Read more