Search code examples
reactjsreduxreact-reduxrequestdispatcher

React: cannot retrieve data from a server (dispatch)


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);
}

Solution

  • 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)