减少 React/Redux 中的重复调度

Question

我有一个名为 saveThing 的操作。在其中，我有参数 thingNoErrors 和 thingWithErrors 。我有一个 if statement，如果 thingNoErrors 有一个值，那么你只调用 API。我的问题是我不想重复发送 constants.SUCCESSFUL 和 callback 只是为了减少代码并避免重复。有没有更好的修改方法？

export const saveThing =
  ({ thingNoErrors = [], thingWithErrors = [], callback = () => {} }) =>
  async (dispatch) => {
    try {
      dispatch({
        type: constants.REQUESTING,
      });

      if (thingNoErrors?.length > 0) {
        let formData = new FormData();

        Object.keys(thingNoErrors).forEach((fieldName) => {
          formData.append(
            thingNoErrors[fieldName]?.name,
            thingNoErrors[fieldName]?.file
          );
        });

        const response = await axios.post(`${API_URL}/sample/api`, formData);

        dispatch({
          type: constants.SUCCESSFUL,
          payload: {
            data: [...response.data, ...thingWithErrors],
          },
        });

        callback('success')
      }

      dispatch({
        type: constants.SUCCESSFUL,
        payload: {
          data: thingWithErrors,
        },
      });

      callback('success')
    } catch (error) {
      dispatch({
        type: constants.ERROR,
      });
    }
  };

Answer 1

您可以将 out/declare 的“响应”变量分解为在 if 条件块之外，然后将其浅合并到 data 数组中以允许单个成功的动作调度。

export const saveThing = ({
  thingNoErrors = [],
  thingWithErrors = [],
  callback = () => {},
}) => async (dispatch) => {
  try {
    dispatch({ type: constants.REQUESTING });

    let response;

    if (thingNoErrors?.length) {
      let formData = new FormData();

      Object.keys(thingNoErrors).forEach((fieldName) => {
        formData.append(
          thingNoErrors[fieldName]?.name,
          thingNoErrors[fieldName]?.file
        );
      });

      response = await axios.post(`${API_URL}/sample/api`, formData);
    }

    dispatch({
      type: constants.SUCCESSFUL,
      payload: {
        data: [...(response?.data || []), ...thingWithErrors],
      },
    });

    callback('success');
  } catch (error) {
    dispatch({ type: constants.ERROR });
  }
};

减少 React/Redux 中的重复调度

Lessen Duplication of Dispatching in React/Redux

ecmascript-6

reactjs

redux

react-hooks