使用react/redux的API调用返回空对象
使用react/redux的API调用返回空对象
提问于 2017-04-10 17:16:09
我是React和Redux的新手，仍然有点困惑。
我的目标是通过使用GET请求在HTML中呈现json数据。我使用react和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 {
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;
}
任何帮助都将不胜感激。
回答 1
Stack Overflow用户
发布于 2017-04-10 17:20:38
因为它是一个async调用，所以应该在axios .then回调中返回一个分派。
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>
)
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43319239
复制相关文章
相似问题
腾讯云开发者
