Estoy tratando de obtener un solo pedido por ID, estoy usando el envío dentro del gancho useEffect y obtengo la acción @@INIT después de recargar la página. Este es mi reductor:

 export const orderDetailsReducer = (state = {orderItems: [], shippingAddress: {}}, action) => { switch (action.type){ case ORDER_DETAILS_REQUEST: return { ...state, loading : true } case ORDER_DETAILS_SUCCESS: return{ loading : false, order : action.payload } case ORDER_DETAILS_FAIL: return{ loading : false, error : action.payload } default: return state } }

Y esta es la acción:

 export const getOrderDetails = (id) => async (dispatch, getState) => { try{ dispatch({ type: ORDER_DETAILS_REQUEST, }) const { userLogin: { userInfo } } = getState() const config = { headers: { 'Content-type': 'application/json', Authorization: `Bearer ${userInfo.token}` } } const {data} = await axios.get( `/api/order/${id}`, config ) dispatch({ type : ORDER_DETAILS_SUCCESS, payload : data }) } catch(error){ dispatch({ type: ORDER_DETAILS_FAIL, payload: error.response && error.response.data.detail ? error.response.data.detail : error.detail }) } }

Y aquí hay una parte de mi archivo jsx:

 const dispatch = useDispatch() const {id} = useParams() const orderDetails = useSelector(state => state.orderDetails) const {error, loading, order} = orderDetails useEffect(() => { dispatch(getOrderDetails(id)) }, [dispatch, id]);

Cuando intento obtener datos en la interfaz de usuario, aparece, pero cuando vuelvo a cargar la página, aparece una página en blanco y la acción se convierte en @@INIT.