从数组调度异步动作反应redux thunk

时间:2020-10-07 17:03:50

标签: javascript reactjs redux async-await redux-thunk

根据要求,我们需要从数组列表中进行API调用。使用redux-thunk进行异步操作。在api调用完成后将请求参数传递给reducer时出现问题。

    # From the container
    let document = [ bankstatement1,bankstatement2];
    document.map(element => {
     dispatch ( actions.uploadFiles(element) )
    });
    # inside actions
    export const uploadFiles = (payload) => {
      return async dispatch => {
        
        const response = await callAPIMiddleware(dispatch, {
          types: ['DOC_UPLOAD_START','DOC_UPLOAD_SUCCESS','DOC_UPLOAD_ERROR'],
          endPoint: ApiEndpoints.DOCUMENT_UPLOAD,
          type: HTTP_METHOD_TYPE.POST,
          payload: payload,
          headers: Headers.multipart,
          
        });
        return response;
      };
    };
    # inside axios middle ware
    export const callAPIMiddleware = async (dispatch, RequestParams) => {
     # calling upload_start ,here also the request payload being asked.     
        dispatch({
            type: "DOC_UPLOAD_START,
            data:RequestParams //bankstatement1,bankstatement2
          });
    
    # let res = await axios.post(endPoint,RequestParams, {
            headers: reqHeaders,
            config: reqConfig,
            });
    if (res && res.data) {
         
            dispatch({
              type:'DOC_UPLOAD_SUCCESS',
              data: res.data,
              param:RequestParams //bankstatement2,bankstatement2 here it is always referring to "bankstatement2" 
            });
    
    }
After the API call is finished, reference to first request parameter is overridden by second one.Can anyone suggest how we can still refer to the first element .

1 个答案:

答案 0 :(得分:0)

编辑: 如果您尝试将最后一个逻辑放在“ then”中,以便确定范围,该怎么办?

axios.post(endPoint,RequestParams, {
  headers: reqHeaders,
  config: reqConfig,
  }).then(res => {
    console.log('calling dispatch for ', RequestParams);
    if (res && res.data) {
      dispatch({
        type:'DOC_UPLOAD_SUCCESS',
        data: res.data,
        param: RequestParams,
      });
    } else {
      console.log('oops no result for ', RequestParams);
    }
  })