减少 React/Redux 中的调度重复

Posted 2023-02-22

【中文标题】减少 React/Redux 中的调度重复

【英文标题】：Lessen Duplication of Dispatching in React/Redux

【发布时间】：2022-01-03 11:12:54

【问题描述】：

我有一个名为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,
      );
    
  ;

【参考方案1】：

您可以将“响应”变量分解/声明为 在 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 );
  
;