使用react/redux的API調用返回空對象

Question

Im新增React和Redux，但仍有點困惑。

我的目標是通過使用GET請求呈現HTML中的json數據。我使用的是反應和Redux的管理對象的狀態，但我相信我的問題是，該數據甚至不存在

這裏是代碼：

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

任何幫助，將不勝感激。

Answer 1

你應該在愛可信.then回調返回調度，因爲它的一個async呼叫

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

     } 

} 

另外，在您的組件需要調用onFetchUsers像

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

}