Question

我正在尝试为某些数据发出GET请求。这是我的行动电话。

componentDidMount() {
     this.props.fetchData(() => {
         this.setState({ isLoading: false });
     });
}

在完成之前，我想暂时显示“正在加载......”，因为获取请求正在进行。我正在使用回调并设置我的本地状态。这是我的动作创建者，带有'回调'。

export function fetchData(callback) {
    return (dispatch) => {
        axios.get(`/api/fetchsomething`)
            .then(() => callback())
            .catch((err) => {
                console.log(err.message);
            });
    }
}

以上是同一个函数，但是调度动作以便我可以接收道具并渲染给我的ui。

export function fetchData(callback) {
    return (dispatch) => {
        axios.get(`/api/fetchsomething`)
            .then((response) => dispatch({ type: FETCH_DATA, payload: response }))
            .catch((err) => {
                console.log(err.message);
            });
    }
}

我的问题是你如何进行回调并在同一个动作创建函数中发送动作？那是不是很好的做法？

Answer 1

你可以做这样的事情

componentDidMount() {
  this.setState({ isLoading: true }, () => {
    // ensuring that you make the API request only 
    // after the local state `isLoading` is set to `true`
    this.props.fetchData().then(() => this.setState({ isLoading: false });
  });
}

和，fetchData定义如下

export function fetchData(callback) {
  return (dispatch) => {
    return axios.get(`/api/fetchsomething`)
      .then((response) => dispatch({ type: FETCH_DATA, payload: response }))
      .catch((err) => console.log(err.message));
  }
}

如果您使用redux-thunk中间件来使用异步操作，那么这些操作将返回Promise s;因此，您可以在Promise结算后设置组件的本地状态。

Answer 2

在组件中：

"the answer"

在动作中，你应该这样做：

.....
componentDidMount() {
    this.props.fetchData();
}
....

export default connect((state) => ({loading: state.loading, data: state.data}))(Component);

在reducer中，你应该这样做：

....
export function fetchData() {
  return (dispatch) => {
    dispatch({ type: FETCHING_DATA});     //dispatch an action for loading state to set it to true

    return axios.get(`/api/fetchsomething`)
      .then((response) => dispatch({ type: DATA_FETCHED, payload: response }))
      .catch((err) => console.log(err.message));
  }
}
....

我个人认为您不应该在您的组件中放置任何.... case 'FETCHING_DATA': return { ...state, loading: true, } case 'DATA_FETCHED': return { ...state, data: action.payload, loading: false, } ....，因为如果您想要重构您的应用，以后可能会导致一些问题。这意味着您的组件中不应该有任何business logic，并且应该通过redux引导所有内容（如果您的应用中存在一些副作用）。因此，您应该从redux本身而不是组件内部控制.then状态。

在调度操作时使用回调

2 个答案: