Блог

Я пытаюсь показать данные 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();
    });
  });
};
  

Что я часто делаю, так это сохраняю всю информацию в объекте и отправляю действие с объектом. Действие будет подхвачено еще одним множеством редукторов.

что-то похожее на это.

 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 может вызываться как угодно и использоваться в любом количестве редукторов. все, что вам нужно сделать, это установить sate, используя что-то вроде

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