首先安装一个库axios,可以用来发送异步的ajax请求
yarn add axios
然后导入该库
components/User.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { get_user } from '../actions';
class User extends Component {
render() {
const { get_user, user } = this.props;
return (
<div>
<h1 className="jumbotron-heading text-center">{ user.email }</h1>
<p className="text-center">
<button onClick={ () => get_user() } className="btn btn-success mr-2">GET RANDOM USER</button>
</p>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
user: state.user
};
};
export default connect(mapStateToProps, { get_user })(User);
actions/index.js
import axios from 'axios';
import { INCREMENT, DECREMENT } from '../constants';
import { FETCH_USER_SUCCESS } from '../constants';
export const increment = () => {
return dispatch => {
setTimeout(() => {
dispatch({
type: INCREMENT
});
}, 2000);
};
};
export const decrement = () => {
return {
type: DECREMENT
}
};
export const get_user = () => {
return dispatch => {
axios.get("https://randomuser.me/api/")
.then(res => {
dispatch(fetch_user(res.data.results[0]));
})
.catch(error => {
console.log(error);
})
};
};
export const fetch_user = (user) => {
return {
type: FETCH_USER_SUCCESS,
user
}
};
reducers/user.js
import { FETCH_USER_SUCCESS } from '../constants';
const user = (state = {}, action = {}) => {
switch(action.type) {
case FETCH_USER_SUCCESS:
return action.user
default: return state;
}
}
export default user;