React redux render data

user_12577343 0
Viewed 59

I have a problem with React and Redux and I imagine finding a solution here ... On my application, I have a function when loading the page componentDidMount which calls a function that lists images on my page. I also have a button that calls the same function.

My problem: when I click on the button, although I already have the list of displayed images, I have the same list twice and if I click again, the same new images are added. It's only when I reload the page that everything comes back to the way it started, I searched in vain, Redux keeps the data and adds the same data each time we call it unless we reload the 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: ""
}

Finilly I found this :

case FETCH_GALLERY_SUCCESS:
            return {
                ...state,
                loading: false,
                stories: [...state.stories, ...action.payload].filter( 
                    (storie, index) => index === [...state.stories, ...action.payload].findIndex( 
                        elem => elem.id === storie.id && elem.id === storie.id
                        )
                    ),
                currentPage: action.currentPage,
                totalPages: action.totalPages,
                totalStories: action.totalStories,
                error: ""
            }
react-redux reactjs
1 Answers

Nick has it nailed in the comment already, but to explain some more:

stories: [...state.stories, ...action.payload],

This is coming down to the way the ... spread operator works. It's taking the original, pre-action state.stories, spreading that in an array, then following that up by spreading the newly arrived action.payload. Basically, you've extended what was originally there with the newly arrived info. If your new info is just a repeat of your old info, you'll see a duplicate batch on the second action, then a triplicate batch on the third and so on. Each subsequent FETCH_GALLERY_SUCCESS basically adds another copy of what was already there (assuming the newly fetched gallery stories are just the same as the old).

Some ways to solve this:

  • If you only ever care about what came in the most recent fetch, just change it to stories: action.payload. What you had before is dropped, but that's probably fine depending on your use-case. (Looks like you'll also need to update your totalStories and other such values as well.)
  • Maybe the later fetch will provide new, additional images beyond what's already there? If that's the case, you could do some kind of array .filter operation on the newly fetched batch to filter out duplicates, then add on the non-duplicates to the front or end of your Redux stories key in a similar fashion to what you have now.
  • Maybe something else if you have a different use-case? You could have a pre-processing step before you do the return of the new state that can have access to the old stories state (via state.stories) and to the newly fetched payload of stories (via action.payload). Write some code to create whatever new combination stories state should be the result, then return that at the end. Don't forget to also handle your other state keys like totalStories in your custom code too.
user_89545410
Related