Tengo dos métodos en dos acciones diferentes,
import { fetchCategories } from "../../../actions/elementsActions" import { fetchPlaces } from "../../../actions/placesActions"Y el método componentWillMount es:
componentWillMount() { this.props.dispatch(fetchCategories()) this.props.dispatch(fetchPlaces()) }Quiero asegurarme de que fetchCategories se obtenga antes que fetchPlaces. ¿Es esta la forma correcta de hacerlo?
ACTUALIZAR
Comportamiento:
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}) }) } }Reductor :
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 }Tienda :
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)El envío es síncrono, pero esto solo garantizará que fetchCategories se active (no se obtenga) antes fetchPlaces . Debe eliminar this.props.dispatch(fetchPlaces()) de componentWillMount() y agregarlo dentro de then((response) de fetchPlaces() para garantizar que se activa después de una recuperación exitosa de fetchPlaces() .