How can i access data from an Axios request

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. :)

then you are not going to be able to access it through the props in your UserList.. — BravoZulu
I see a problem in your axios request. You are returning the response and then storing the response in your state. Be sure to access the data property of response. Example: .then(response => response.data);. This way you have the data that came from your api. — Andrey Luiz
what do you mean by console.log(this.props.users.data["0"].pwd) is not working ? any error in console? you have an arrary of users access in your component already , you logged it successfully — givehug

BravoZulu BravoZulu · Accepted Answer · 2017-06-15T15:43:11

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

How can i access data from an Axios request

2 Answers