从其他操作调用操作

Question

我正在学习React，我有一个关于我做的东西的问题。从另一个操作中调用一个操作是否正确？做这样的事情是不是最好的选择？

import * as types from "../types/actionTypes";
import * as consumptionApi from "../../utils/api/consumptionApi";
import * as taskApi from "../../utils/api/taskApi";
import * as taskActions from "../actions/taskActions";

export function loadProjectConsumptionSuccess(consumptions) {
  return { type: types.LOAD_PROJECT_CONSUMPTION_SUCCESS, consumptions };
}

export function loadProjectConsumption(projectId) {
  return async function(dispatch, getState) {
    try {
      let tasks = await taskApi.getTasksByProjectId(projectId);
      dispatch(taskActions.loadTasksByProjectSuccess(tasks));
      tasks = getState().tasks;
      const consumptions = await consumptionApi.getProjectConsumption(tasks);
      dispatch(loadProjectConsumptionSuccess(consumptions));
    } catch (error) {
      console.log(error);
      throw error;
    }
  };
}

Answer 1

在awaiting之后，调度操作没有任何错误。事实上，在很长一段时间里，它一直是首选方法，特别是当代码没有太大变化的时候。

当你继续下去的时候，你会发现你经常需要做出改变，而且这不是最灵活的方法。现在人们似乎是这样做的

// actions.js

export const retrieveData = () => () => fetch(`/url`).then(d => d.json())

export const populateData = (data) => ({ type: 'MODULE_POPULATE_DATA', data })

// inside the component

const dispatch = useDispatch()

useEffect(() => {
  const loadData = async () => {
    const { data } = await dispatch(retrieveData())
    dispatch(populateData(data))
  }

  loadData()
}, [])

另一种方法会导致一定数量的代码重复(这很好)，但可以访问组件中的所有内容: props、refs、state、memoized等，而不必做奇怪的事情来传递它们。