Вызов действия от другого действия

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

Нет ничего плохого в диспетчерских действиях после await ing. Фактически, это был go -подход в течение очень долгого времени, особенно когда код не сильно изменился. вносить изменения и что это не самый гибкий подход. То, что люди сейчас делают, это

// 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()
}, [])

Этот другой подход приводит к некоторому дублированию кода (что нормально), но имеет доступ ко всему внутри компонента: реквизитам, ссылкам, состоянию, запомненным значениям. и др c. без необходимости делать странные вещи, чтобы передать их.