Redux 入門教程—15redux-thunk 實踐發送 ajax 請求

首先安裝一個庫axios，可以用來發送異步的ajax請求

yarn add axios

然後導入該庫

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;