[Immutable.js] Using fromJS() to Convert Plain JavaScript Objects into Immutable Data

Posted 2020-06-14

Immutable.js offers the fromJS() method to build immutable structures from objects and array. Objects are converted into maps. Arrays are converted into lists. The fromJS() method can also take a reviver function for custom conversions.

 

 Object to Immutable Map:

 

check by isMap():

    const plainJSObject = {
      title: "Go to grocery",
      text: "I need milk and eggs",
      completed: false,
      category: {title: "House Duties", priority: 10}
    };
    
    const immutableTodo = Immutable.fromJS(plainJSObject);
    
    expect(Immutable.Map.isMap(immutableTodo)).to.be.true

 

We cat get value by getIn() method:

expect(immtableTodo.getIn(["category", "title"])).to.equal("House Duties");

 

Array to Immutable List:

check by isList():

    const plainJSArray = [
      "Go to grocery",
      "Buy milk and eggs",
      "Help kids with homework",
      ["Buy Lemons", "Make Lemonade"]
    ];
    
    const immutableTodoList = Immutable.fromJS(plainJSArray);
    expect(Immutable.List.isList(immutableTodoList)).to.be.true;

 

get value by getIn():

expect(immutableTodoList.getIn([3, 1])).to.equal("Make Lemonade")

 

Convert a plain array to Immutable Map:

    const plainJSArray = [
      "Go to grocery",
      "Buy milk and eggs",
      "Help kids with homework",
      ["Buy Lemons", "Make Lemonade"]
    ];

    const immutableTodoList = Immutable.formJS(plainJSArray, (key, value)=>{

         return value.toMap();
    });


    expect(immutableTodoList.getIn([3,1])).to.equal("Make Lemonade");