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