Así que implementé el desplazamiento infinito con redux. Todo funciona, solo que cuando cambio de página y vuelvo a la página de inicio, muestra las publicaciones a las que me desplacé hacia abajo anteriormente. Mi problema con esto es que cuando creo una nueva publicación, se muestra en la parte inferior porque muestra las publicaciones anteriores a las que me desplacé primero y luego la publicación recién creada. He estado recorriendo aquí y lo único que me pareció lógico fue restablecer el estado en el desmontaje del componente. Lo creé en mis acciones y lo agregué a mi useEffect y todavía no funciona. ¿Hay alguna manera cuando salgo de mi página de inicio, se reiniciará para que cuando regrese a mi página de inicio vuelva a buscar todas las publicaciones? Estoy atascado. Ayuda por favor

Página principal

 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]);

Comportamiento

 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 }; };

reductores

 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] };