Axios callback on GET for React

Question

I am trying to display a loading spinner while the axios get request is going on and to do so I believe I need a callback from the request. I call the get request in componentDidMount() like so:

componentDidMount() {
  this.props.fetchCloudProperties( () => {
    this.setState( { dim : false } );
  } );
}

Where hopefully when the data is retrieved, the dimmer(spinner) will go away based off of that seState call. I've have callback's with posts, but have never done one with a get. My get action for the data is:

export function fetchCloudProperties( callback ) {
  const VARIABLE_URL = '/cloud/properties';
  const request      = axios.get( `${ROOT_URL}${VARIABLE_URL}` )
    .then( request => {
      return ({
        type    : FETCH_CPS,
        payload : request
      });
    } ).catch( ( error ) => {
      console.log( error );
    } )
}

Right now the console is complaining about 'Actions must be plain objects' which I am not sure what that means, but also I have seen it complaining about 'unhandled rejection' so not too sure.

EDIT: I have a createCloudProperty method that uses a callback and it works fine:

export function createCloudProperty( values, callback ) {
  const VARIABLE_URL = '/cloud/property';
  const request      = axios.post( `${ROOT_URL}${VARIABLE_URL}`, values )
    .then( () => callback() );

  return ({
    type    : CREATE_CP,
    payload : request
  });
}

that is called from:

onSubmit( values ) {
  this.props.createCloudProperty( values, () => {
    this.props.history.push( '/cloudproperties' );
  } );
}

Are you using redux, or flux, or something else? Is `fetchCloudProperties` an action creator? If you're doing async actions you need to use something like `redux-thunk` to be able to return promises from an action creator. — Andy Ray, Jun 13 '17 at 17:35
Possible duplicate of [Actions must be plain Objects in React/Redux?](https://stackoverflow.com/questions/39693161/actions-must-be-plain-objects-in-react-redux) — Mayank Shukla, Jun 13 '17 at 17:44
@AndyRay I am using `redux-promise`, and yes `fetchCloudProperties()` is an action creator as far as my understanding goes. — erp, Jun 13 '17 at 17:58

score 1 · Answer 1 · answered Jun 13 '17 at 17:58

1

You can't pass the request/response because it's not a plain object. You should use the response data.

export function fetchCloudProperties( callback ) {
  const VARIABLE_URL = '/cloud/properties';
  const request      = axios.get( `${ROOT_URL}${VARIABLE_URL}` )
    .then( response => {
      return ({
        type    : FETCH_CPS,
        payload : response.data
      });
    } ).catch( ( error ) => {
      console.log( error );
    } )
}

answered Jun 13 '17 at 17:58

bmgalego

54
2

That provides the same error as before. I updated my question with how I did it for a post and that works fine. – erp Jun 13 '17 at 18:04

Axios callback on GET for React

1 Answers1