State seems to be getting overwritten instead of merged
<p>I'm currently trying to learn Redux and I think I must be implementing it wrong as only the last component to be rendered on the page actually works. I suspect the state is being overwritten each time. </p>

<p>I followed <a href="https://www.youtube.com/watch?v=NKFFDJ3Bmho" rel="noreferrer">this</a> tutorial which only uses one example of data retrieval so I have probably just misunderstood how to write to the state. </p>

<p>Here is my reducer. Any ideas where I've gone wrong? Also this all seems very verbose, is there a DRYer way of writing this out?</p>

<pre><code>import Immutable from 'seamless-immutable';
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

// Import actions
import {
  REQUEST_CONFIG,
  GET_CONFIG,
  REQUEST_PAGES,
  GET_PAGES,
  REQUEST_SOCIAL_LINKS,
  GET_SOCIAL_LINKS,
  REQUEST_NAV,
  GET_NAV
} from './actions';

const configInitialState = Immutable({
  items: [],
  isFetching: false
})

const pagesInitialState = Immutable({
  items: [],
  isFetching: false
})

const socialLinksInitialState = Immutable({
  items: [],
  isFetching: false
})

const navInitialState = Immutable({
  items: [],
  isFetching: false
})

export function config(state = configInitialState, action) {
  switch (action.type) {
    case GET_CONFIG :
      return Immutable(state).merge({
        items: action.payload.config[0],
        isFetching: false
      })
    case REQUEST_CONFIG :
      return Immutable(state).merge({
        isFetching: true
      })
    default:
      return state;
  }
}

export function pages(state = pagesInitialState, action) {
  switch (action.type) {
    case GET_PAGES :
      return Immutable(state).merge({
        items: action.payload.pages,
        isFetching: false
      })
    case REQUEST_PAGES :
      return Immutable(state).merge({
        isFetching: true
      })
    default:
      return state;
  }
}

export function socialLinks(state = socialLinksInitialState, action)      {
  switch (action.type) {
    case GET_SOCIAL_LINKS :
      return Immutable(state).merge({
        items: action.payload.socialLinks,
        isFetching: false
      })
    case REQUEST_SOCIAL_LINKS :
      return Immutable(state).merge({
        isFetching: true
      })
    default:
      return state;
  }
}

export function nav(state = navInitialState, action) {
  switch (action.type) {
    case GET_NAV :
      return Immutable(state).merge({
        items: action.payload.nav,
        isFetching: false
      })
    case REQUEST_NAV :
      return Immutable(state).merge({
        isFetching: true
      })
    default:
      return state;
  }
}

const rootReducer = combineReducers({
  config,
  pages,
  socialLinks,
  nav,
  routing: routerReducer
});

export default rootReducer;
</code></pre>

<p>Just in case it's required, here is an example of one of my components as well: </p>

<pre><code>import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { navLoad } from '../../../scripts/actions';

export default class HeaderNav extends React.Component {
  componentWillMount() {
    const { dispatch } = this.props;
    dispatch(navLoad());
  }

  render() {
    const { nav } = this.props;
    const navitems = nav &amp;&amp; nav.items ? nav.items.asMutable().map((item) =&gt; {
      if(item.inNav === 'header' || item.inNav === 'both') {
        return &lt;li key={item._id}&gt;&lt;Link to={item.slug}&gt;{item.name}&lt;/Link&gt;&lt;/li&gt;
      }
    }) : null;
    if(nav.isFetching) {
      return(
        &lt;section class="loader"&gt;
          &lt;span&gt;Content is loading...&lt;/span&gt;
        &lt;/section&gt;
      )
    } else {
      return(
        &lt;nav class="c-primary-nav"&gt;
          &lt;span class="c-primary-nav_toggle"&gt;Menu&lt;/span&gt;
          &lt;ul&gt;
            { navitems }
          &lt;/ul&gt;
        &lt;/nav&gt;
      )
    }
  }
}

function select(state) {
  const { nav } = state;
  return {
    nav
  };
}

export default connect(select)(HeaderNav);
</code></pre>

<p>and here is where the components are called: </p>

<pre><code>import React from 'react';
import HeaderNav from './Header/nav.jsx';
import SocialLinks from './Header/socialLinks.jsx';

export default class Header extends React.Component {
  render() {
    return(
      &lt;header class="c-global-header" role="banner"&gt;
        &lt;HeaderNav /&gt;
        &lt;SocialLinks /&gt;
      &lt;/header&gt;
    )
  }
}
</code></pre>

<p>Update: I'm still hoping for an answer to this question as it's still stumping me, I've altered the code a little now but to no avail. You can see my full codebase here: <a href="https://github.com/alexward1981/portfolio-react" rel="noreferrer">https://github.com/alexward1981/portfolio-react</a> (All the relevant stuff is in the 'src' folder)</p>