title: images being duplicated when navigating between pages in redux / react application
body: <p>I am creating a react / redux application for learning purposes. I am attempting to pull the images from contentful through their api. I have set up an action, reducer and component which displays the image fine, but when navigating between pages the images are duplicated. Everytime I return to the same page the image is duplicated + 1 so if I visit the page five times the image will exist 5 times on that page. </p>
  
  <p>It would be great if anyone could give me some pointers in how to debug this or even a solution to the issue.</p>
  
  <p><em>action</em></p>
  
  <pre><code>export function fetchAsset(id) {
    const request = axios.get(`${API_BASE_URL}/spaces/${API_SPACE_ID}/assets/${id}?access_token=${API_TOKEN}`);
    return {
      type: FETCH_ASSET,
      payload: request
    };
  }
  </code></pre>
  
  <p><em>reducer</em></p>
  
  <pre><code>import { FETCH_ASSET } from '../actions/index';
  const EMPTY_ARRAY = []
  
  export default function(state = EMPTY_ARRAY, action) {
    switch(action.type) {
    case FETCH_ASSET:
      return [ ...state, action.payload.data];
    default:
      return state;
    }
  }
  </code></pre>
  
  <p><em>asset component</em></p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { fetchAsset } from '../actions/index';
  import styled, { css } from 'styled-components';
  
  
  const RespImg = styled.img`
      width: 100%;
  `
  
  
  class Asset extends Component {
    componentWillMount() {
      this.props.fetchAsset(this.props.assetId)
    }
    shouldComponentUpdate(nextProps, nextState) {
      return true;
    }
  
    renderAsset() {
      var assetArray = this.props.assets;
  
      console.log(assetArray + ' this.props')
      return assetArray.map((asset, index) =&gt; {
        if (asset.sys.id == this.props.assetId) {
          return (
            &lt;RespImg src={asset.fields.file.url} alt={asset.fields.file.fileName} key={index}/&gt;
          );
        }
      });
    }
    render() {
      return (
        &lt;div className="asset"&gt;
          {this.renderAsset()}
        &lt;/div&gt;
      );
    }
  }
  
  function mapStateToProps(state) {
    return {
      assets: state.assets
    };
  }
  
  export default connect(mapStateToProps, { fetchAsset })(Asset)
  </code></pre>
  
  <p><em>Adding the component to the page</em></p>
  
  <pre><code>&lt;Asset assetId={work.fields.featuredImage.sys.id} assetKey={index} /&gt;
  </code></pre>