Merging Objects with Immutable js
<p>I am using React, Redux &amp; Immutable here. The question is regarding merging a plain Js object into Immutable <code>Map</code> obj.</p>

<p>Importing Immutable.js:</p>

<pre><code>import { List as iList,
         Map as iMap } from "immutable";
</code></pre>

<p><code>action.payload</code> is this:</p>

<pre><code>{
    Preview : {
        tabClass : "tabPreview tab activeTab"
    },
    Body : {
        tabClass : "tabBody tab"
    },
    Sleeve : {
        tabClass : "tabSleeve tab"
    }
};
</code></pre>

<p><code>InitialTabState</code> created with 'Immutable.js' is this:</p>

<pre><code>const initialTabState = iList.of(
    iMap({
        tabClass : "tabPreview tab activeTab",
        tabName : "Preview"
    }),
    iMap({
        tabClass : "tabBody tab",
        tabName : "Body"
    }),
    iMap({
        tabClass : "tabSleeve tab",
        tabName : "Sleeve"
    })
);
</code></pre>

<p>The reducer function, which is merging the <code>action.payload</code> at the top, into the <code>InitialTabState</code> above is this:</p>

<pre><code>const tabsState = ( state = initialTabState, action ) =&gt; {
    let payload = action.payload;
    switch( action.type ) {
    case( ENABLE_TAB ):
        return (
            state.map( (obj) =&gt; {
                let curObjName = obj.get( "tabName" );
                return (
                    obj.merge( payload[ curObjName ][ "tabName" ] )
                );
            })
        );
    ...
};
</code></pre>

<p>However, nothing seems to be happening. I do not get any error, the output object remains the same as InitialTabState, when the property <code>tabClass</code> within it should change as per the merge function from Immutable.js.</p>