API call using react/redux returns empty object

Question

Im new to React and Redux and still confused a little bit.

My goal is to render json datas in the HTML by using GET request. I'm using react and redux to manage the state of the objects, but I believe my problem is that the data is not even there

here is the code:

Action.js :

import axios from 'axios';
export function fetchUsers(){
const request=axios.get('https://randomuser.me/api/');
return(dispatch)=>{
    request.then(({data})=>{
        dispatch({type:'FETCH_PROFILES',payload:data})

    });
};



}

Component.js:

import React,{Component} from 'react';
import {connect} from 'react-redux';
import * as actions from '../actions';


class App extends Component {

	ComponentWillMount() {
		this.props.dispatch(onFetchUser());
	}
		 render() {
   
   
    const mappedUsers = this.props.users.map(user => <li>{user.email}</li>)

    return <div>
      
      <ul>{mappedUsers}</ul>
    </div>
  }
		
	}
const mapStateToProps = (state) => {
  return {
    users: state.users.users
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onFetchUsers: () => dispatch(fetchUsers())
  };
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

CombineReducer.js :

import { combineReducers } from "redux"

import users from "./reducer-active-user"


export default combineReducers({

  users ,
})

Reducer.js :

const initialState = {
    users: []
};
export default function reducer(state= initialState
  , action) {


    switch(action.type){
        case 'FETCH_PROFILES':
            return   {
      users: action.payload,
      }
        break;
            
    }
    return state;
}

Any help would be appreciated.

Shubham Khatri · Accepted Answer · 2017-04-10 11:24:09Z

1

You should return a dispatch in the axios .then callback since its an async call

import axios from 'axios';
export function fetchUsers(){
        return function(dispatch) {  
                       return axios.get('https://randomuser.me/api/')
                       .then(({data}) => {
                            dispatch({type:'FETCH_PROFILES',payload:data})  
                        });

       }

 }

Also in your component you need to call onFetchUsers like

class App extends Component {

    componentWillMount() {
        this.props.onFetchUsers()
     }
    render() {


    const mappedUsers = this.props.users.map(user => <li>{user.email}</li>)

    return  (<div>
               <ul>{mappedUsers}</ul>
           </div>
       )
  }

}

edited Apr 10, 2017 at 11:24

answered Apr 10, 2017 at 9:20

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Blue Over a year ago

Nothing changed, it still returns empty object

Shubham Khatri Over a year ago

try the solution now

Blue Over a year ago

Still nothing, but for some reason i think the problem is with the component

Shubham Khatri Over a year ago

console.log(data) in the .then of axios and see if you get anything . Also Try .then((response) => {})

Shubham Khatri Over a year ago

Not working is fine do you get the result of console.log(response)

|

Collectives™ on Stack Overflow

API call using react/redux returns empty object

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related