时间戳

首页 > 解决方案 > 如何在发送 API 请求期间显示加载指示器

reactjs - 如何在发送 API 请求期间显示加载指示器

问题描述

我想在请求等待数据时显示加载指示器

我正在使用 axios 发送 http 请求
和 redux 作为状态管理

我试图定义一个加载对象，以便每当我调用一个动作时，将其设置为 true
，但当我获取数据时它不会变为 false

这是我尝试过的

    const INITIAL_STATE ={
    loading:false,
    success:null,
    msg:'',
    obj:[]
    }
    
    export default (state = INITIAL_STATE, action) => {
      switch (action.type) {
        case SEND_PHONE:
          return {...state,
         success:action.payload.success, 
         msg:action.payload.msg, 
         obj:action.payload.obj
         ,loading:true};
         default:
          return state;
      }

}

标签： reactjsredux

解决方案

一种方法是使用带有 redux-thunk ( https://github.com/reduxjs/redux-thunk ) 的异步操作，它可以让您在一个操作中分派多个时间

您的操作可能看起来像这样：

export function fetchSomething() {

    return dispatch => {
        dispatch({type:FETCH_PENDING})

        someApi.getSomeStuff()
            .then(response => {
                dispatch({type:FETCH_SUCCESSFULL, payload: response.data.results})
                return response.data.results
            })
            .catch(error => {
                dispatch({type:FETCH_ERROR, payload: error})
            })
    }
}

然后你的减速器看起来像这样

const initialState = {
    data: [],
    loading: false,
    error: null
}

function fetchSomethingReducer(state = initialState, action) {
    switch(action.type) {
        case FETCH_PENDING:
            return {
                ...state,
                loading: true,
                error: null
            }
        case FETCH_SUCCESS:
            return {
                ...state,
                loading: false,
                data: action.payload
            }
        case FETCH_ERROR:
            return {
                ...state,
                data: [],
                loading: false,
                error: action.payload
            }
        default:
            return state
    }
}

推荐阅读