Tengo una aplicación React con la tienda Redux . Estoy usando dos páginas: página de índice y página de edición de publicación. Cuando el usuario va a la página de edición, carga el contenido de la publicación desde el servidor y lo configura en la tienda Redux . El código se ve así:

 const EditPost = props => { const { postId } = useParams(); const { isLoading, error, post } = useSelector(state => state.post); const dispatch = useDispatch(); useEffect( () => { if (postId) dispatch(getPost(postId)); }, [dispatch, postId] ); if (isLoading) { return <div>Post is loading...</div> } if (error) { return <div>Error: {error}</div> } return ( <div>Post content here...</div> ) }

El problema es que cuando el usuario navega a la página de índice, la publicación en Redux ya está configurada y el usuario ve la última publicación editada en lugar de la publicación de índice predeterminada. El código de la página de índice es:

 const Index = props => { const { isLoading, error, post } = useSelector(state => state.post); const dispatch = useDispatch(); const postId = defaultPostId; useEffect( () => { dispatch(getPost(postId)); }, [dispatch, postId] ); if (isLoading) { return <div>Post is Loading...</div> } if (error) { return <div>Error: {error}</div> } return ( <div>Default index post here...</div> ) }

Mi comportamiento deseado tiene que ser como si el usuario va a la página de índice después de editar la publicación, debería ver la carga y luego el contenido predeterminado de la publicación. Pero la situación actual es que el usuario ve la última publicación editada, luego carga el proceso y luego muestra la publicación predeterminada. Obviamente porque Redux contiene los datos de la última publicación en la tienda.

Entonces, la pregunta es: ¿cómo y cuándo establecer la publicación en el estado predeterminado? Supongo que está relacionado con los ciclos de vida.

El código de acción PS getPost se ve así:

 export const getPost = postId => { return async (dispatch, getState) => { try { dispatch(isPostLoading(true)); const { data: post } = await req.get(`/post/${postId}`); dispatch(setPost(post)); dispatch(setPostError(null)); } catch (error) { setPostError(error.message); } dispatch(isPostLoading(false)); } }