Where to pass onSuccess, onComplete, etc?

[djalmaaraujo]

I am trying to have callbacks, but it's not working in the object:

    type: ORDER_SUBMIT,
    onSuccess({ getState, dispatch}){},
    payload: {
      request: {
        method: 'put',
        url: `/tickets/${orderData.orderTicketCode}`,
        data: {}
      },
      onSuccess({ getState, dispatch }) {

      },
      meta: {
        onSuccess({ getState, dispatch}) {
        }
      }
    }

Where is the correct location?

[azza85]

@djalmaaraujo I came here to ask the same question. I can see an issue here which has a little information about it. https://github.com/svrcekmichal/redux-axios-middleware/issues/7

I think one of the below ways might be what you are after.

Just append _SUCCESS or _FAIL to your action eg ORDER_SUBMIT_SUCCESS or ORDER_SUBMIT_FAIL (these are built in to the module)

I have a saveComment function which is triggered when the user click save.

export function saveComment (formData) {
  return {
    type: SAVING_COMMENT,
    payload: {
      request: {
        url: API.saveComment(),
        method: 'POST',
        headers: API.getPostHeaders(),
        data: formData
      }
    }
  }
}

I then have

    case SAVING_COMMENT:
      return {
        ...state,
        sendingComment: true
      }
    case SAVING_COMMENT_SUCCESS:
      return {
        ...state,
        commentText: '',
        sendingComment: false,
        saveSuccessfull: true
      }

Or If you are using dispatch (see the res output below)

export function saveCommentUpdateFeed (saveData, listFilters) {
  return function (dispatch) {
    Promise.all([
      dispatch(saveComment (saveData))
      .then(res => console.log(res)) //you can add something here on success
    ])
   .then(() => {
      setTimeout(() => {
        dispatch(getComments(listFilters)) // this updates comment list with saved comment from above
      }, 500)
    })
  }
}

res output

{
  "type": "SAVING_COMMENT_SUCCESS",
  "payload": {
    "data": {},
    "status": 201,
    "statusText": "CREATED",
    "headers": {
      "content-type": "application/json"
    },
    "config": {
      "transformRequest": {},
      "transformResponse": {},
      "timeout": 0,
      "xsrfCookieName": "XSRF-TOKEN",
      "xsrfHeaderName": "X-XSRF-TOKEN",
      "maxContentLength": -1,
      "headers": {}
    },
    "request": {}
  },
  "meta": {
    "previousAction": {
      "type": "SAVING_COMMENT",
      "payload": {
        "request": {
          "url": "/savingcomment/",
          "method": "POST",
          "headers": {
            "Content-Type": "application/json",
            "Accept": "application/json"
          },
          "data": {}
        }
      }
    }
  }
}

[djalmaaraujo]

Thanks @azza85. I still feel odd that we need a setting to have the .catch() to work. Why this is not the default?

[marcusmolchany]

you'll want to do something like this:

    type: ORDER_SUBMIT,
    payload: {
      request: {
        method: 'put',
        url: `/tickets/${orderData.orderTicketCode}`,
        data: {}
      },
      options: {
        onSuccess({ getState, dispatch, response }) {
           dispatch({ type: `${ORDER_SUBMIT}_SUCCESS`, payload: response.data });
        },
        onError({ getState, dispatch, error }) {
           dispatch({ type: `${ORDER_SUBMIT}_FAILURE`, payload: error.response });
        },
      }
    }

[karthik446]

@marcusmolchany Thank you. This should've been in the documentation.

[MichaelVessia]

manually dispatching a new action in onSuccess with a payload field caused an infinite loop of dispatches since my middleware would pick it up as a new request to be intercepted. changing payload to something else like data avoids this.