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

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");