API-Aufruf mit react/redux gibt leeres Objekt zurück

Question

Ich bin neu zu React und Redux und noch ein wenig verwirrt.

Mein Ziel ist es, Json-Daten im HTML mit GET-Anfrage zu rendern. Ich verwende reagieren und redux den Zustand der Objekte zu verwalten, aber ich glaube, mein Problem ist, dass die Daten nicht einmal

hier ist der 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 { 
 

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

 
    return <div> 
 
     
 
     <ul>{mappedUsers}</ul> 
 
    </div> 
 
    } 
 
\t \t 
 
\t } 
 
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; 
 
}

Jede Hilfe würde geschätzt.

Answer 1

Sie sollten einen Versand in der axios .then Rückruf zurückkehren, da seine ein async Anruf

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

     } 

} 

auch in Ihrer Komponente Sie onFetchUsers wie

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

}