Question

我在两个不同的行动中有两种方法，

import { fetchCategories } from "../../../actions/elementsActions"
import { fetchPlaces } from "../../../actions/placesActions"

componentWillMount方法是：

componentWillMount() {
    this.props.dispatch(fetchCategories())
    this.props.dispatch(fetchPlaces())
}

我想确保在fetchPlaces之前获取fetchCategories。这是正确的做法吗？

更新

操作：

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})
      })
  }
}

减速器：

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
}

商店：

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)

Answer 1

Dispatch是同步的，但这只能保证fetchCategories之前fetchPlaces被触发（未获取）。您需要从this.props.dispatch(fetchPlaces())移除componentWillMount()并将其添加到then((response)的{{1}}内，以确保在成功获取fetchPlaces()后触发它。

componentWillMount React中的多个分派

1 个答案: