Show 404 after Redux ajax request - reactjs

Question

When users navigate to /places/:slug in my React/Redux app, an ajax call is triggered to get the relavant place data from the database.
While this all works as expected I'm not sure how to show a 404 if no place was found. I have a 404 route setup for when users navigate to a non-route but how can I trigger a 404 using Redux?
In my container component I have:
this.props.dispatch(fetchPlace(this.props.match.params.slug))
and my action:
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})
})
}
}
and my reducer:
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
Ideas
I could use another state property in my reducer called notFound and initialize it to false. Then read the response data payload and detect whether a job has been returned. If not then set notFound to true. But how do I listen for notFound to be true and trigger a 404?

Answer 1

I would suggest returning a promise from fetchPlace action and catch it in container.
Action code which returns promise
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})
})
}
}
Container code (You must have access to react-router context or history object)
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`)
})
Another approach would be checking notFound value in componentWillReceiveProps(nextProps) method.