剧场模式
首页前端ReduxRedux 入门教程(React 进阶)

Redux 入门教程 #15 redux-thunk 实践发送 ajax 请求 part 1

求知小风 · 元婴发布于
5

https://randomuser.me/

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;
4 条回复
官方服务号
随机课程
诱人的 TypeScript 视频教程

诱人的 TypeScript 视频教程

69 个视频9 小时 24 分钟入门

Pro¥ 178.00¥ 142.40

TypeScript已完结

学员(175)
骑龙 · 道祖caizhuo · 练虚招财加菲猫 · 大罗zhufellx · 真仙lcy · 大乘钮乾坤 · 大乘tr77229591 · 大罗+ != 0 != - · 大乘luanwu · 真仙🍃叶子 · 真仙mrj · 大罗LONG · 真仙
最新动态
骑龙 · 道祖学习到了9:03
caizhuo · 练虚学习到了8:58
招财加菲猫 · 大罗学习到了2:26
zhufellx · 真仙学习到了8:59
lcy · 大乘学习到了8:03
统计信息
    学员: 17805
    视频数量: 1049
    帖子数量: 427

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 关注我们 | 在线学员:121

Top