How can i access data from an Axios request - reactjs

Question

I'm using React JS with Redux and have a little problem retrieving data from a request with Axios..
Here is my Axios request :
import Axios from 'axios';
class UsersApi {
static getAllUsers() {
return Axios.get('http://localhost:3001/user').then(response => {
return response;
});
}
}
export default UsersApi;
And this is where i want to use my data :
import React, {Component} from 'react';
import {connect} from 'react-redux';
class UserList extends Component {
render(){
console.log(this.props.users);
return(
<ul>
</ul>
);
}
}
function mapStateToProps(state) {
return {
users: state.users
};
}
export default connect(mapStateToProps)(UserList);
This is the action :
import UsersApi from '../api/UsersApi';
export function loadUsers() {
return function(dispatch) {
return UsersApi.getAllUsers().then(users => {
dispatch(loadUsersSuccess(users));
}).catch(error => {
throw(error);
});
};
}
export function loadUsersSuccess(users) {
return {type: 'LOAD_USERS_SUCCESS', users};
}
And this is my reducer :
import initialState from './initialState';
export default function usersReducer(state = initialState.users, action) {
switch(action.type) {
case "LOAD_USERS_SUCCESS":
return action.users
default:
return state;
}
}
And this is what i have with console.log : Result console.log
When i try to display the password of the first user i put console.log(this.props.users.data["0"].pwd) but this is not working..
If I try to return response.data["0"].pwd in the request I can have the password with console.log(this.props.users).
But the problem is that i want the data of every User..
I need some help. :)

Answer 1

First of all, you need to add your users to your state. I see you are using redux, so you should dispatch an action after receiving your users and let your reducers handle it:
Axios.get('http://localhost:3001/user').then(response => {
dispatch(usersLoaded(response.data));
});
You should have an action called usersLoaded and a reducer that handles it:
const usersLoaded = users => ({ type: 'USERS_LOADED', payload: users });
const users = (state = [], action) => {
switch(action.type) {
case 'USERS_LOADED':
return action.payload;
default:
return state;
}
}
This way you'll be able to access your users in your UserList component

Answer 2

As a proper redux way to do things, right inside the then on your get call you need to fire an action to SET_USERS in which you will use your reducer to replace your state with your new users coming back from the api.