ReactJs Redux

J'ai un problème avec React et Redux et j'imagine que trouver une solution par ici... Sur mon application, j'ai une fonction au chargement de la page componentDidMount qui appelle une fonction qui listes des images sur ma page. J'ai un bouton également qui appelle la même fonction.

Mon problème : quand je clique sur le bouton, alors que j'ai déjà la listes des images affichées, j'ai deux fois la même liste et si je clique une nouvelle fois, les mêmes nouvelles images s'additionnent. C'est seulement quand je recharge la page que tout revient comme au départ, j'ai cherché en vain, Redux garde les données et en rajoute les mêmes à chaque appelle sauf si on recharge la page.

case FETCH_GALLERY_SUCCESS:
return {
...state,
loading: false,
// stories: state.stories.concat(action.payload),
stories: [...state.stories, ...action.payload],
currentPage: action.currentPage,
totalPages: action.totalPages,
totalStories: action.totalStories,
error: ""
}

Voici mon componentDidMount avec la méthode fetchGalleryFirst() qui déclenche l'action. Le problème c'est que j'ai un autre bouton pour revenir sur cette page de départ et ce buton appelle à nouveau fetchGalleryFirst(), je me retrouve donc avec des données en double.

componentDidMount() {
console.log("Je suis dans le componentDidMount")

if(sessionStorage.getItem('data')) {
const userId = JSON.parse(sessionStorage.getItem('data')).id
const currentPage = this.props.currentPage

const searchInfo = {
userId: userId,
currentPage: currentPage,
search: this.props.query
}

// if(this.props.totalStories && this.props.storiesData.stories.length >= this.props.totalStories ) {
// return
// } else {

this.props.fetchGalleryFirst(searchInfo)

// }

} else {
history.push('/login');
}

// if(this.props.validateStory === "isActive") {
// document.location.reload(true)
// // window.location.reload(true)
// }
}