Question

这听起来有些奇怪（我是React / redux的新手），但可以说我有一个组件，其中我这样调用动作：

componentDidMount() {
  this.props.getTask(this.props.match.params.id);
}

在此调用的操作会在Redux状态中填充一些与任务相关的数据（标题，说明等）。它还有另一个元素的ID，我需要该元素才能调用另一个操作，例如：

this.props.getSomethingElse(this.props.task.something._id);

问题：在componentDidMount中，我调用第一个操作，而在我收到第一个操作的数据后，我想调用第二个操作，因为如上所述，我需要该ID。我应该如何处理？在这种情况下，最佳做法是什么？

编辑：下面的Redux操作。

//GET Task
export const getTask = id => dispatch => {
  dispatch(setTaskLoading());
  axios
    .get(`/api/tasks/${id}`)
    .then(res => {
      dispatch({
        type: GET_TASK,
        payload: res.data
      });
    })
    .catch(err =>
      dispatch({
        type: GET_TASK,
        payload: null
      })
    );
};

Answer 1

反应组件不应协调多个redux调用。应基于用户交互或生命周期（挂载/卸载）来调度呼叫。

如果您有依赖于其他动作的动作，则可以使用中间件（例如thunk）或sagas组合它们。

在这种情况下，由于getTask是一个重击，因此您可以使用它来调度多个操作，这些操作可以使用异步（axios）请求返回的数据：

//GET Task
export const getTask = id => dispatch => {
  dispatch(setTaskLoading());
  axios
    .get(`/api/tasks/${id}`)
    .then(res => {
      dispatch({
        type: GET_TASK,
        payload: res.data
      });

      // getSomethingElse
      dispatch({
        type: GET_SOMETHING_ELSE,
        payload: res.data.something.id
      });
    })
    .catch(err =>
      dispatch({
        type: GET_TASK,
        payload: null
      })
    );
};

根据从其他动作收到的redux道具进行通话动作

1 个答案: