title: Merging Objects with Immutable js
body: <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>