title: Infinite Scroll doesn't keep previous items in React/Redux
body: <p>I'm trying to load the second set of items from the reddit API with Infinite scrolling when the user scrolls to the bottom of the page and although they do load successfully, the previous items are overridden by the new ones.</p>
  <p>You can see this happening here: <a href="https://reddix.netlify.app/" rel="nofollow noreferrer">https://reddix.netlify.app/</a></p>
  <p>This is the Redux Slice with the Thunks:</p>
  <pre><code>// Gets the first 10 Posts from the API
  export const getPosts = createAsyncThunk(
    &quot;post/getPosts&quot;,
    async (apiAddress) =&gt; {
      const response = await fetch(apiAddress);
      if (!response.ok) throw new Error(&quot;Request Failed!&quot;);
      const data = await response.json();
      return data;
    }
  );
  
  // Loads the Next 10 Posts
  export const getMorePosts = createAsyncThunk(
    &quot;post/getMorePosts&quot;,
    async (apiAddress) =&gt; {
      const response = await fetch(apiAddress);
      if (!response.ok) throw new Error(&quot;Request Failed!&quot;);
      const data = await response.json();
      return data;
    }
  );
  
  const redditPostSlice = createSlice({
    name: &quot;post&quot;,
    initialState: {
      redditPost: {},
      isLoading: false,
      hasError: false,
      moreIsLoading: false,
      moreHasError: false,
    },
    extraReducers: (builder) =&gt; {
      builder
        .addCase(getPosts.pending, (state) =&gt; {
          state.isLoading = true;
          state.hasError = false;
        })
        .addCase(getPosts.fulfilled, (state, action) =&gt; {
          state.redditPost = action.payload.data;
          state.isLoading = false;
          state.hasError = false;
        })
        .addCase(getPosts.rejected, (state) =&gt; {
          state.isLoading = false;
          state.hasError = true;
        })
        .addCase(getMorePosts.pending, (state) =&gt; {
          state.moreIsLoading = true;
          state.moreHasError = false;
        })
        .addCase(getMorePosts.fulfilled, (state, action) =&gt; {
          state.redditPost = action.payload.data;
          state.moreIsLoading = false;
          state.moreHasError = false;
        })
        .addCase(getMorePosts.rejected, (state) =&gt; {
          state.moreIsLoading = false;
          state.moreHasError = true;
        });
    },
  });
  </code></pre>
  <p>And in this Search components I have the functionality for loading the pages:</p>
  <pre><code>const Search = () =&gt; {
    const [input, setInput] = useState(&quot;&quot;);
    const [isFetching, setIsFetching] = useState(false);
    const redditPost = useSelector(selectRedditPost);
    const dispatch = useDispatch();
  
    // Get the Last Post
    const lastPost = () =&gt; {
      if (redditPost.children) {
        const [lastItem] = redditPost.children.slice(-1);
  
        const lastKind = lastItem.kind;
        const lastId = lastItem.data.id;
  
        return `${lastKind}_${lastId}`;
      } else {
        return;
      }
    };
  
    // API Endpoints
    const hotApiAddress = `https://www.reddit.com/r/${input}/hot.json?limit=10`;
    const newApiAddress = `https://www.reddit.com/r/${input}/new.json?limit=10`;
    const moreApiAddress = `https://www.reddit.com/r/${input}/new.json?limit=10&amp;after=${lastPost()}`;
  
    // Get Hot Posts
    const handleHot = (e) =&gt; {
      e.preventDefault();
      if (!input) return;
  
      dispatch(getPosts(hotApiAddress));
    };
  
    // Get New Posts
    const handleNew = (e) =&gt; {
      e.preventDefault();
      if (!input) return;
  
      dispatch(getPosts(newApiAddress));
    };
  
    // Fire Upon Reaching the Bottom of the Page
    const handleScroll = () =&gt; {
      if (
        window.innerHeight + document.documentElement.scrollTop !==
        document.documentElement.offsetHeight
      )
        return;
  
      setIsFetching(true);
    };
  
    // Debounce the Scroll Event Function and Cancel it When Called
    const debounceHandleScroll = debounce(handleScroll, 100);
  
    useEffect(() =&gt; {
      window.addEventListener(&quot;scroll&quot;, debounceHandleScroll);
      return () =&gt; window.removeEventListener(&quot;scroll&quot;, debounceHandleScroll);
    }, [debounceHandleScroll]);
  
    debounceHandleScroll.cancel();
  
    // Get More Posts
    const loadMoreItems = useCallback(() =&gt; {
      dispatch(getMorePosts(moreApiAddress));
      setIsFetching(false);
    }, [dispatch, moreApiAddress]);
  
    useEffect(() =&gt; {
      if (!isFetching) return;
      loadMoreItems();
    }, [isFetching, loadMoreItems]);
  </code></pre>
  <p>Is there any way to keep the previous items when the next set loads?</p>