Redux 入门教程—15redux-thunk 实践发送 ajax 请求2

系统管理员 2021-10-23 10:25 220阅读 0赞

一般异步请求有三种情况

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

[https://randomuser.me/][https_randomuser.me]

[https://cn.redux.js.org/docs/advanced/AsyncActions.html][https_cn.redux.js.org_docs_advanced_AsyncActions.html]

**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 } = this.props;
    
        const { error, isFetching, user } = this.props.user;
    
        let data;
    
        if (error) {
          data = error;
        } else if (isFetching) {
          data = "Loading...";
        } else {
          data = user.email;
        }
    
        return (
          <div>
            <h1 className="jumbotron-heading text-center">{ data }</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, FETCH_USER_REQUEST, FETCH_USER_FAILURE } from '../constants';
    
    export const increment = () => {
      return dispatch => {
        setTimeout(() => {
          dispatch({
            type: INCREMENT
          });
        }, 2000);
      };
    };
    
    export const decrement = () => {
      return {
        type: DECREMENT
      }
    };
    
    export const get_user = () => {
      return dispatch => {
        dispatch(fetch_user_request())
        axios.get("https://randomuser.me/api/")
          .then(res => {
            dispatch(fetch_user(res.data.results[0]));
          })
          .catch(error => {
            dispatch(fetch_user_failure(error.response.data));
          })
      };
    };
    
    export const fetch_user_failure = (error) => {
      return {
        type: FETCH_USER_FAILURE,
        error
      };
    };
    
    export const fetch_user = (user) => {
      return {
        type: FETCH_USER_SUCCESS,
        user
      }
    };
    
    export const fetch_user_request = () => {
      return {
        type: FETCH_USER_REQUEST
      }
    };

**reducers/user.js**

import { FETCH_USER_SUCCESS, FETCH_USER_REQUEST, FETCH_USER_FAILURE } from '../constants';
    
    const initialState = {
      isFetching: false,
      error: null,
      user: {}
    };
    
    const user = (state = initialState, action = {}) => {
      switch(action.type) {
        case FETCH_USER_SUCCESS:
          return {
            isFetching: false,
            error: null,
            user: action.user
          };
        case FETCH_USER_REQUEST:
          return {
            isFetching: true,
            error: null,
            user: {}
          }
        case FETCH_USER_FAILURE:
          return {
            isFetching: false,
            error: action.error,
            user: {}
          };
        default: return state;
      }
    }
    
    export default user;

**constants/index.js**

export const INCREMENT = "INCREMENT";
    export const DECREMENT = "DECREMENT";
    
    // user
    export const FETCH_USER_SUCCESS = "FETCH_USER_SUCCESS";
    export const FETCH_USER_REQUEST = "FETCH_USER_REQUEST";
    export const FETCH_USER_FAILURE = "FETCH_USER_FAILURE";

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20211023/6ea3eda5c257475886b697ef0905ae98.png
[https_randomuser.me]: https://randomuser.me/
[https_cn.redux.js.org_docs_advanced_AsyncActions.html]: https://cn.redux.js.org/docs/advanced/AsyncActions.html