redux state updating incorrectly
<p>I was trying to study the redux flow with an example. But got stuck upon in between. Here is the <a href="https://plnkr.co/edit/4tCh6dl2UXj56GAdzj2d?p=preview" rel="nofollow noreferrer">plunkr</a> link for the same.</p>

<pre><code>function combineReducers(currentState, action) {

  var nextState = Object.assign({}, currentState);

    /*On load placeholder details for all thumbnails*/
    var placeholder = {
        urlPath: "http://placehold.it/640x480",
        header: "PLACEHOLDER",
        description: "Description text for the above image"
    };
    if (currentState === undefined) {       
        nextState = placeholder;
        return nextState;
    }
  //Problem here i guess
  nextState = {
      animals : animalReducer(nextState.animals, action),    
      architecture : architectureReducer(nextState.architecture, action)    
  }

  return nextState;
}
</code></pre>

<p>The application loads with an initial state of setting all media elements to a placeholder. ( That is working )
On individual button click, it was supposed to fetch details of each category and only populate those media element. </p>

<p><strong>Problem:</strong></p>

<blockquote>
  <p>When i click the Go button, both 1 and 2 elements is updating
  together. Ideally i was expecting to get only Animal details on
  clicking element 1, Architecture details on element 2, Nature on 3 and
  People on 4.</p>
</blockquote>

<p>I have not implemented 3 and 4 as i am sure if this works, then it will be more of just adding additional actions and reducers for each piece of state.</p>

<p>I think the problem lies in, rootReducer.js line 19, or index.js, Line 34 or 37, but not sure how to proceed! Any pointers will be of great help! Ive already pulled off a hell lot of hairs on my head today!</p>

<blockquote>
  <p><strong>PS:</strong> I know doing in jquery is kind of crud, but just for learning purpose.!</p>
</blockquote>

<p>Advanced thanks for the helpers!
Cheers.</p>