在Redux ajax請求後顯示404

當用戶在我的React/Redux應用程序中導航到/places/:slug時，會觸發ajax調用以從數據庫獲取相關位置數據。在Redux ajax請求後顯示404

雖然這一切都如預期的那樣工作，但我不確定如果沒有找到地方，如何顯示404。當用戶導航到非路由時，我有404路由設置，但是如何使用Redux觸發404？

在我的容器組件我有：

this.props.dispatch(fetchPlace(this.props.match.params.slug))

和我的行動：

import axios from "axios"; 

export function fetchPlace(slug) { 
    return function(dispatch) { 
    dispatch({type: "FETCH_PLACE"}); 
    axios.get("/server/places/" + slug) 
     .then((response) => { 
     dispatch({type: "FETCH_PLACE_FULFILLED", payload: response.data}) 
     }) 
     .catch((err) => { 
     dispatch({type: "FETCH_PLACE_REJECTED", payload: err}) 
     }) 
    } 
}

和我的減速器：

const reducer = (state={ 
    place: {}, 
    isFetching: false, 
    error: null 
}, action) => { 
    switch(action.type) { 
    case "FETCH_PLACE" : { 
     return { ...state, isFetching: true } 
    } 
    case "FETCH_PLACE_REJECTED" : { 
     return { ...state, isFetching: false, error: action.payload } 
    } 
    case "FETCH_PLACE_FULFILLED" : { 
     return { ...state, isFetching: false, place: action.payload } 
    } 
    default: 
     return state 
    } 
} 

export default reducer

理念

我可以在我的還原器中使用另一個狀態屬性，名稱爲notFound，並將其初始化爲false。然後讀取響應數據負載並檢測作業是否已返回。如果沒有，則將notFound設置爲true。但是，我怎麼聽不到發現是真的並觸發404？

來源

2017-06-12 tommyd456

你使用什麼路由器？你有REDX集成瓦特/路由器？ – Rokas

我正在使用'react-router' v4 – tommyd456

寫了一個基於你的路由器lib的答案 – Rokas

我建議從fetchPlace行動中返回一個承諾，並在容器中捕獲它。

返回承諾

export function fetchPlace(slug) { 
    return function(dispatch) { 
    dispatch({type: "FETCH_PLACE"}); 
     return axios.get("/server/places/" + slug) 
     .then((response) => { 
     dispatch({type: "FETCH_PLACE_FULFILLED", payload: response.data}) 
     }) 
     .catch((err) => { 
     dispatch({type: "FETCH_PLACE_REJECTED", payload: err}) 
    }) 
    } 
}

集裝箱代碼

行動代碼（您必須能夠訪問反應，路由器環境或歷史記錄對象）

this.props.dispatch(fetchPlace(this.props.match.params.slug)) 
.then(() => {}) 
.catch(() => { 
    //Redirect to 404 page using history object from props 
    this.props.history.replace(`404`) 

    //Redirect to 404 page using context 
    this.context.router.history.replace(`404`) 
})

另一種方法是在componentWillReceiveProps(nextProps)方法來檢查notFound值。

來源

2017-06-12 15:27:01 Rokas

在Redux ajax請求後顯示404

回答

相關問題