React: cannot retrieve data from a server (dispatch)

Question

it's my first time working with React and I'm having a few problems when I try to get some data. My problem is inside getChargesByUser() method where I just written two console.logs, the first one it shows but the second one not, that means that I'm getting inside the method but not into the return (dispatch) => {...} The weird thing is that it's not the only method I have with the return (dispatch) => {...} like loadUserList() and it's the only I cannot have access and don't know why

const SHOW_PAYMENTS = 'SHOW_PAYMENTS';

const initialState = { 
  open_drawer: false,
  open_search: false,
  list_users: [],
  list_selectusers: [],
  countries: [],
  states: [],
  list_payments: [],
  user: [],
  useremail: [],
  save: [],
  eventtype: '',
  user_redirect: '',
  saveloading: false
};

export default function reducer(state = initialState, action) {
  switch (action.type) {
    case SHOW_PAYMENTS:
      return Object.assign({}, state, {list_payments: action.payload, eventtype: 'payments'});
    default:
      return state;
  }
}

export function loadUserList(page, perpage) {
  /* I HAVE ACCESS HERE */
  return (dispatch) => { 
    /* I ALSO HAVE ACCESS HERE */
    axios.get(`${config.host}/v1/user?page=${page}&perpage=${perpage}`, {
      headers: {'x-asd-apikey': config.apikey}
    }).then(response => {
      dispatch({type: LOAD_USERLIST, payload: response.data.data});
    }).catch(error => {
      dispatch({type: LOAD_USERLIST_ERROR, payload: error.response.data});
    });
  };
}

export function getChargesByUser(userid) {
  console.log('yes'); //<-- I have access here
  return (dispatch) => {
    console.log('nope'); // I have not accesss here
    axios.get(`http://localhost:7770/v1/payments/${userid}/resume`, {
      headers: {'x-asd-apikey': config.apikey}
    }).then(response => {
      console.log('response: ', response.data.data);
      dispatch({type: SHOW_PAYMENTS, payload: response.data.data.records});
    }).catch(error => {
      console.log('error: ', error.response.data);
      dispatch({type: SHOW_PAYMENTS, payload: { options: error.response.data}});
    });
  };
}

And this is where I call the method

@connect(
  state => ({
    eventtype: state.users.eventtype,
    list_payments: state.users.list_payments,
  }, usersActions)
)

static propTypes = {
  eventtype: PropTypes.any,
  list_payments: PropTypes.any,
  getChargesByUser: PropTypes.func.isRequired,
  params: PropTypes.object
}

componentDidMount() {
  console.log('params: ', this.props.params.userid);
  this.props.getChargesByUser(this.props.params.userid);
}

score 0 · Answer 1 · answered Mar 27 '18 at 07:50

0

When inside promises you need to return a promise-like object to continue the chain.

So: you need to return axios.get(... if you want to go inside then/catch after (axios call returns promises).

answered Mar 27 '18 at 07:50

keul

7,673
20
45

Sorry, I don't want to return the value inside the axios promise, I need to dispatch the info inside that promise ```dispatch({type: SHOW_PAYMENTS, payload: response.data.data.records}); ``` – CanKer Mar 27 '18 at 07:56
Yes, but to reach this line of code, that is inside a `.then` you need to return the axios promise. – keul Mar 27 '18 at 07:58
I just answered my own question but I appreciate your answers and your time, Luca. Thanks and greetings. :) – CanKer Mar 27 '18 at 08:04

score 0 · Accepted Answer · answered Mar 27 '18 at 08:03

Sorry, I was like all the day with the problem and didn't notice that the problem it was at the @connect() where my code was

@connect(
  state => ({
    eventtype: state.users.eventtype,
    list_payments: state.users.list_payments,
  }, usersActions)
)

and it's supposed to be like this:

@connect(
  state => ({
    eventtype: state.users.eventtype,
    list_payments: state.users.list_payments
  }),
  usersActions)

React: cannot retrieve data from a server (dispatch)

2 Answers2