剧场模式
首页前端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 条回复
加微信(qiuzhi99666)入群官方服务号
随机课程
GraphQL + React + React Router + Apollo 实战教程

GraphQL + React + React Router + Apollo 实战教程

10 个视频1 小时 12 分钟初级

Pro¥ 149.00¥ 119.20

GraphQL已完结新课程

学员(140)
郭宇铭 · 真仙不满 · 真仙温文尔雅 · 道祖烂肉 · 大罗wangmingyuan · 练虚jeanim · 大乘一支笔 · 元婴求知小白 · 真仙。zzzzzzz · 大乘weikq · 大乘Catherine🌱 · 练虚璐จุ๊บ · 元婴
最新动态
郭宇铭 · 真仙学习到了2:10
不满 · 真仙学习到了9:04
温文尔雅 · 道祖学习到了9:00
烂肉 · 大罗学习到了9:04
wangmingyuan · 练虚学习到了9:04
统计信息
    学员: 15271
    视频数量: 883
    帖子数量: 433

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 在线学员:138

Top