title: Multiple dispatch in componentWillMount React
body: <p>I have two methods in two different actions,</p>
  
  <pre><code>import { fetchCategories } from "../../../actions/elementsActions"
  import { fetchPlaces } from "../../../actions/placesActions"
  </code></pre>
  
  <p>And the componentWillMount method is:</p>
  
  <pre><code>componentWillMount() {
      this.props.dispatch(fetchCategories())
      this.props.dispatch(fetchPlaces())
  }
  </code></pre>
  
  <p>I want to make sure fetchCategories is fetched before fetchPlaces. Is this the right way of doing it? </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Actions:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import axios from "axios";
  
  export function fetchPlaces() {
    return function(dispatch) {
      axios.get("/getPlaces")
        .then((response) =&gt; {
            console.log(response);
          dispatch({type: "FETCH_PLACES_FULFILLED", payload: response.data})
        })
        .catch((err) =&gt; {
          dispatch({type: "FETCH_PLACES_REJECTED", payload: err})
        })
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Reducer : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Store : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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)</code></pre>
  </div>
  </div>
  </p>