So i've implemented infinite scroll with redux. Everythings works its just that when I change pages then go back to the home page, it shows the posts i scrolled down to previously. My issue with this is that when i create a new post, it shows all the way at the bottom because its showing the previous posts i scrolled down to first then the newly created post. I've been scouring here and the only thing that sounded logical to me was to reset the state on component unmount. I've created it in my actions and added it to my useEffect and it still dont work. Is there a way when I leave my home page, it will reset so that when i go back to my home page it will fetch all posts again? Im stuck. Help please

HomePage

const [page, setPage] = useState(1);
const dispatch = useDispatch();
const { loading, posts, total } = useSelector((state) => state.posts);

useEffect(() => {
    dispatch(getPosts(page));

    return () => {
      dispatch(resetPosts());
    };
  }, [dispatch, page]);

Actions

export const getPosts = (page) => async (dispatch) => {
  try {
    const {
      data: { posts, totalPosts },
    } = await api.fetchPosts(page);

    dispatch({
      type: PC.FETCH_ALL_POSTS_SUCCESS,
      payload: { posts, totalPosts },
    });
  } catch (error) {
    dispatch({ type: PC.FETCH_ALL_POSTS_FAIL, payload: error.response });
  }
};
export const resetPosts = () => {
  return { type: PC.RESET_POSTS };
};

Reducers

export const postsReducer = (state = { posts: [] }, action) => {
  switch (action.type) {
    case PC.FETCH_ALL_POSTS_REQUEST:
      return { loading: true };
    case PC.FETCH_ALL_POSTS_SUCCESS:
      return {
        loading: false,
        posts: [...state.posts, ...action.payload.posts],
        total: action.payload.totalPosts,
      };
    case PC.FETCH_ALL_POSTS_FAIL:
      return { loading: false, error: action.payload };
    case PC.RESET_POSTS:
      return state;
    case PC.CREATE_POST:
      return { ...state, posts: [...state.posts, action.payload] };