I have two methods in two different actions,
import { fetchCategories } from "../../../actions/elementsActions"
import { fetchPlaces } from "../../../actions/placesActions"
And the componentWillMount method is:
componentWillMount() {
this.props.dispatch(fetchCategories())
this.props.dispatch(fetchPlaces())
}
I want to make sure fetchCategories is fetched before fetchPlaces. Is this the right way of doing it?
UPDATE
Actions:
import axios from "axios";
export function fetchPlaces() {
return function(dispatch) {
axios.get("/getPlaces")
.then((response) => {
console.log(response);
dispatch({type: "FETCH_PLACES_FULFILLED", payload: response.data})
})
.catch((err) => {
dispatch({type: "FETCH_PLACES_REJECTED", payload: err})
})
}
}Reducer :
export default function reducer(
state={
places: [],
fetching: false,
fetched: false,
error: null,
}, action) {
switch (action.type) {
case "FETCH_PLACES": {
return {...state, fetching: true}
}
case "FETCH_PLACES_REJECTED": {
return {...state, fetching: false, error: action.payload}
}
case "FETCH_PLACES_FULFILLED": {
return {
...state,
fetching: false,
fetched: true,
places: action.payload,
}
}
}
return state
}Store :
import { applyMiddleware, createStore } from "redux"
import logger from "redux-logger"
import thunk from "redux-thunk"
import promise from "redux-promise-middleware"
import reducer from "./reducers"
const middleware = applyMiddleware(promise(), thunk, logger())
export default createStore(reducer, middleware)Dispatch is synchronous, but this will only guarantee that fetchCategories is fired (not fetched) before fetchPlaces. You need to remove this.props.dispatch(fetchPlaces()) from componentWillMount() and add it inside the then((response) of fetchPlaces() to guarantee that it fires after a successful fetch of fetchPlaces().