剧场模式
首页前端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;
3 条回复
小程序(beta)
随机课程
Mobx 进阶提高 - 技巧插件篇

Mobx 进阶提高 - 技巧插件篇

0 个视频0 分钟高级

全部免费

前端React还未更新新课程

学员
槐子吖吖吖嘿 · 元婴jhshen · 道祖灰太狼 · 练虚River- · 大乘nickiwen · 真仙Sandro · 真仙highcker · 太乙ldc · 真仙阳光才是真美 · 合体Hichank · 太乙React-小白 · 合体吐槽电视机 · 道祖Joshua-Tu · 练虚zbx7858 · 道祖Sine · 合体frank · 真仙   1234 · 大乘** · 元婴Leo · 元婴JesusCracker · 太乙Jean · 真仙生活~ · 合体mfkyddh · 金仙名字改了 · 合体wjfc · 太乙yupd · 真仙柠檬GDM · 元婴sweida · 元婴damofan · 大罗dawnhandd · 元婴阿震 · 真仙qwas3110 · 大罗JiaojSun · 练虚congzi2019 · 大乘hanruiying · 道祖黄彪 · 元婴泡泡鱼 · 元婴尹迪 · 合体朱雪松 · 合体pameladuke · 真仙yaoyf · 合体chloris · 太乙LeoDo · 太乙chrisliume · 太乙TaiheChen · 合体lqp336699 · 真仙ping · 元婴| · 合体第五季 · 元婴Demons · 合体yhuyo · 道祖star · 练虚smile · 真仙章伟 · 合体Matthew · 道祖helloword_xy · 合体hello101 · 元婴lolotang · 元婴冀宇航 · 真仙周乐 · 真仙457341620 · 大乘韦威 · 真仙jianglinhub · 大乘00Jane · 合体不死鸟 · 合体ccc147256 · 太乙netNowork · 大乘思进 · 大乘常亮 · 合体Google · 练虚SkyFishT · 合体TX · 元婴背包客 · 合体FastTurbo · 道祖vaga756 · 合体jasmineamber · 合体xiao_ran · 太乙caspertu · 真仙sisliy · 合体daniyar709 · 元婴17706511375 · 真仙ttswh2009 · 太乙super · 大乘暮雨朝歌 · 元婴zhenxingQ · 真仙shishihou · 道祖吴盛威 · 真仙summer_Day · 元婴wasd6631456 · 大乘gdmec07150725 · 元婴woshimaxiaorui · 真仙timorTm · 金仙bobcyd212 · 道祖crystal0579 · 太乙心之所向,无力阻挡 · 真仙RocketWill · 合体baozaomiaomiao · 合体小鱼 · 元婴hanlibin123 · 元婴iosLongFeng · 金仙satos · 合体liunian1993 · 合体Super-Ps · 合体masteralva · 合体lbb · 合体zhuofan · 大罗wsxiaotongtong · 合体justinelong · 合体xuezh · 大罗KevinIgo · 合体Fish-Fan · 合体sishenguodong · 合体zc3130902 · 大罗hungeroxc · 道祖fanguomao · 元婴samuelshang · 太乙dannyking630 · 真仙yinyue123 · 元婴libin · 大乘
最新动态
槐子吖吖吖嘿 · 元婴学习到了9:02
jhshen · 道祖学习到了0:59
灰太狼 · 练虚学习到了5:19
River- · 大乘学习到了8:59
nickiwen · 真仙学习到了9:04

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

Top