我想用不同的动作从获取服务中分派4个不同的值。想打个电话

时间:2019-04-08 20:34:03

标签: javascript html reactjs redux react-redux

我正在尝试显示4个不同数组的数据。我正在打电话给get服务,但打电话了4次。相反,我想打个电话。具有相同的链接,但要针对不同的数据调度4个不同的操作。如您所见,我要调度4个常量,我现在必须拨打4个电话。我正在使用initialload()到达Redux中的视图。

export function getcoCodeFilter() {
  return new Promise((resolve, reject) => {
    fetch(getServiceContext() + 'getfilteroptions', {
      method: 'GET',
      credentials: 'same-origin'
    })
      .then((response) => {
        if (response.ok) {
          response
            .json()
            .then((json) => {
              const filterDisplay = json.data;
              const companyList = filterDisplay.companyCodes;
              const formtypeList = filterDisplay.formTypes;
              const yearList = filterDisplay.yearList;
              const qtrList = filterDisplay.quarterList;
              resolve(companyList);
            });
        }
        else {
          response
            .json()
            .then((json) => {
              const errors = json;
              reject(errors ? errors.exceptionMessages : []);
            });
        }
      });
  });
}

// get filter formtypes
export function getFormTypesFilter() {
  return new Promise((resolve, reject) => {
    fetch(getServiceContext() + 'getfilteroptions', {
      method: 'GET',
      credentials: 'same-origin'
    })
      .then((response) => {
        if (response.ok) {
          response
            .json()
            .then((json) => {
              const coTypesList = json.data;
              resolve(coTypesList.formTypes);
            });
        }
        else {
          response
            .json()
            .then((json) => {
              const errors = json;
              reject(errors ? errors.exceptionMessages : []);
            });
        }
      });
  });
}

// get year for Filters
export function getYearFilter() {
  return new Promise((resolve, reject) => {
    fetch(getServiceContext() + 'getfilteroptions', {
      method: 'GET',
      credentials: 'same-origin'
    })
      .then((response) => {
        if (response.ok) {
          response
            .json()
            .then((json) => {
              const coTypesList = json.data;
              resolve(coTypesList.yearList);
            });
        }
        else {
          response
            .json()
            .then((json) => {
              const errors = json;
              reject(errors ? errors.exceptionMessages : []);
            });
        }
      });
  });
}

// get quarters
export function getQTRFilter() {
  return new Promise((resolve, reject) => {
    fetch(getServiceContext() + 'getfilteroptions', {
      method: 'GET',
      credentials: 'same-origin'
    })
      .then((response) => {
        if (response.ok) {
          response
            .json()
            .then((json) => {
              const coTypesList = json.data;
              resolve(coTypesList.quarterList);
            });
        }
        else {
          response
            .json()
            .then((json) => {
              const errors = json;
              reject(errors ? errors.exceptionMessages : []);
            });
        }
      });
  });
}


export const getInitialLoad = (dispatch) => {
  return new Promise((resolve) => {


    getcoCodeFilter().then((companyList) => {
      dispatch({
        type: 'COCODE_FILTER_DISPLAY',
        value: companyList
      });

      resolve();
    });

    getFormTypesFilter().then((formtypeList) => {
      dispatch({
        type: 'FORMTYPES_FILTER_DISPLAY',
        value: formtypeList
      });

      resolve();
    });

    getYearFilter().then((yearList) => {
      dispatch({
        type: 'YEAR_FILTER_DISPLAY',
        value: yearList
      });

      resolve();
    });

    getQTRFilter().then((qtrList) => {
      dispatch({
        type: 'QTR_FILTER_DISPLAY',
        value: qtrList
      });

      resolve();
    });
  });
};

1 个答案:

答案 0 :(得分:0)

我经常要做的是将所有信息存储在一个对象中,并对该对象进行操作。该动作将被更多的减速器所抓起。

与此类似。

export const getInitialLoad = (dispatch) => {
    const ResponseData = {}
    return new Promise((resolve) => {
      getcoCodeFilter().then((companyList) => {
        ResponseData["companyList"] = companyList;
        resolve();
      });

      getFormTypesFilter().then((formtypeList) => {
        ResponseData["formtypeList"] = formtypeList;
        resolve();
      });

      getYearFilter().then((yearList) => {
        ResponseData["yearList"] = yearList;
        resolve();
      });

      getQTRFilter().then((qtrList) => {
        ResponseData["qtrList"] = qtrList;
        dispatch({
          type: 'INITIAL_LOAD_ACTION',
          value: ResponseData
        });
        resolve();
      });
    });
  };

INITIAL_LOAD_ACTION可以称为任何名称,并可以用于任何数量的reducer中。您要做的就是使用

的行来设置状态

action.payload.value.ResponseData,其中ResponseData是您在上面设置的4个键之一。

编辑:

export const getInitialLoad = async (dispatch) => {
    const ResponseData = {}
    ResponseData["companyList"] = await  getcoCodeFilter();
    ResponseData["formtypeList"] = await  getFormTypesFilter();
    ResponseData["yearList"] = await  getYearFilter();
    ResponseData["qtrList"] = await  getQTRFilter(); 
    dispatch({
        type: 'INITIAL_LOAD_ACTION',
        value: ResponseData
    });
  };

或者您可以做类似

的操作
export const getInitialLoad = async (dispatch) => {
    const ResponseData = await Promise.all([getcoCodeFilter, getFormTypesFilter, getYearFilter, getQTRFilter])
    dispatch({
        type: 'INITIAL_LOAD_ACTION',
        value: ResponseData
    });
  };

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all