Parsing nested Records in Immutable.js

Question

Suppose I have the following Records defined using Immutable.js:

var Address = Immutable.Record({street: '', city: '', zip: ''});
var User = Immutable.Record({name: '', address: new Address()});

How do I convert plain javascript object into the User record? I tried the following but it does not produce the expected output:

var user = new User({name: 'Foo', address: {street: 'Bar', city: 'Baz'}});
// => Record { "name": "Foo", "address": [object Object] }

I am aware that it is possible to explicitly create the Address record:

var user = new User({name: 'Foo', address: new Address({street: 'Bar', city: 'Baz'})});
// => Record { "name": "Foo", "address": Record { "street": "Bar", "city": "Baz", "zip": "" } }

But that is not solution I am looking for. Imagine you have Records nested several levels deep and want to store/retrieve the data as JSON (e.g. in database). I would like to use the actual User record structure as a schema information for recreating the nested records. Or is there a better way to represent nested and structured immutable data?

You could check the reviver argument in Immutable.fromJs, see stackoverflow.com/questions/28639878/… — OlliM
– OlliM, Commented Apr 23, 2015 at 9:25
To make the question clearer you should state that you want new User({name: 'Foo', address: {street: 'Bar', city: 'Baz'}}).address instanceof Address to be true. — Andy
– Andy, Commented Dec 20, 2016 at 3:42

Arek Flinik · Accepted Answer · 2015-04-23 10:35:10Z

10

The intended use of Record structure isn't to verify the structure of provided data, just to determine set of keys that are allowed and provide default values if they're not given.

So using your example, if you initialize the record without providing Address, you will get the proper Immutable.Record object for Address:

var user = new User({name: 'Foo'});
// => Record { "name": "Foo", "address": Record { "street": "", "city": "", "zip": "" } }

One hackish way to achieve what you want would be to write a wrapper on Immutable.fromJS method with custom reviver function:

Immutable.Record.constructor.prototype.fromJS = function(values) {
  var that = this;
  var nested = Immutable.fromJS(values, function(key, value){
    if(that.prototype[key] && that.prototype[key].constructor.prototype instanceof Immutable.Record){return that.prototype[key].constructor.fromJS(value)}
    else { return value }
  });
  return this(nested);
}

Then you can use it like this:

var user = User.fromJS({name: 'Foo', address: {street: 'Bar', city: 'Baz'}});

// => User { "name": "Foo", "address": Record { "street": "Bar", "city": "Baz", "zip": "" } }

However if you want to have proper checking your data structures, I would recommend using Immutable.js together with some static type-checker, like http://flowtype.org/ or http://www.typescriptlang.org/

answered Apr 23, 2015 at 10:35

Arek Flinik

7296 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dkl Over a year ago

Actually my intent was not to verify the structure of the data but to hide the fact that the data passed to child components is immutable. When you pass Immutable.Map to child component, it must be aware of it and use data.get('foo') instead of data.foo. I tried to workaround this using Record, which defines the object properties, so that the child component (that just renders the data) can simply use data.foo without caring whether the data is immutable or not.

Andy Over a year ago

The real problem is to automatically deserialize the address from plain JSON into an Address record in the User constructor.

Robin Pokorny Over a year ago

This is smart. I liked it a lot. Then I discovered that since Immutable.fromJS is bottom-to-top (leaves first) it cannot be used for deeply nested structures :(

Andy · Accepted Answer · 2016-12-20 03:38:01Z

9

You can make User subclass the Record definition and parse address in the constructor:

import {Record} from 'immutable'

const Address = Record({street: '', city: '', zip: ''});
class User extends Record({name: '', address: new Address()}) {
  constructor({name, address} = {}) {
    super({name, address: new Address(address)})
  }
}

const user = new User({
  name: 'Andy',
  address: {
    street: 'wherever',
    city: 'Austin',
    zip: 'TX'
  }
})

console.log(user)
console.log('user.address instanceof Address:', user.address instanceof Address)

const user2 = new User({name: 'Bob'})

console.log(user2)
console.log('user2.address instanceof Address:', user2.address instanceof Address)

Output:

User { "name": "Andy", "address": Record { "street": "wherever", "city": "Austin", "zip": "TX" } }
user.address instanceof Address: true
User { "name": "Bob", "address": Record { "street": "", "city": "", "zip": "" } }
user2.address instanceof Address: true

answered Dec 20, 2016 at 3:38

Andy

8,8915 gold badges60 silver badges68 bronze badges

2 Comments

Victor Queiroz Over a year ago

What about List?

Andy Over a year ago

@VictorQueiroz depending on where you mean the list is (Record containing a List? List of Records?) it might involve a combination of this and the reviver function mentioned in the above answer.

Collectives™ on Stack Overflow

Parsing nested Records in Immutable.js

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related