如何在反应中显示加载器图像？答案

【问题标题】：How to show loader image in react?如何在反应中显示加载器图像？
【发布时间】：2017-09-20 09:20:27
【问题描述】：

我想在用户点击特定 URL 时显示加载图像，并在 API 成功获取数据时隐藏。我没有对最初应该在哪里添加代码以及当 API 响应成功时如何隐藏的图像做出反应。

这是获取数据的动作创建者。

export const fetchEvents = (requestData) => ({
  type: FETCH_EVENTS,
  payload: axios.get(requestData.url, fetchEventsConfig)
})

这是获取数据的reducer。

export default (state = initialState, action) => {
switch (action.type) {
case FETCH_EVENTS_FULFILLED:
  const oldState = Object.assign({}, state)
  const response = Object.assign({}, action.payload.data)
  const allResults = oldState.results.concat(response.results)
  return {
    ...state,
    ...response,
    results: allResults
  }
 }
}

我是这个 react redux 的新手，所以任何帮助都会很棒

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

您可以在 Redux 状态中添加一个布尔属性来指示加载状态。我们称之为isLoading。发送FETCH_EVENTS 时设置isLoading true。当您发送FETCH_EVENTS_FULFILLED 时将其设置为false。

使用 @connect HOF 将 isLoading 的值传递给您的 React 组件。值为 true 时渲染加载指示器，为 false 时渲染内容。

export default (state = initialState, action) => {
    switch (action.type) {
    case FETCH_EVENTS: {
        return {...state, isLoading: true}
    }
    case FETCH_EVENTS_FULFILLED: {
        const response = action.payload.data
        const results = [...state.results, ...response.results]

        return {
            ...state,
            ...response,
            results,
            isLoading: false
        }
    }
    case FETCH_EVENTS_FAILURE: {
        return {...state, isLoading: false}
    }
    }
}

附言

在每个 switch/case 之后的大括号内包含代码限制了该块内 const 的范围。

【讨论】：

【解决方案2】：

编写一个加载器文件（loader.js）

import React from 'react'
import {ClipLoader} from "react-spinners";

const Loader = ({ loading, message }) => {

    return loading ? (
         <div className='wrapper'>
            <ClipLoader
               size={40}
               color={"#123abc"}
               loading={loading}
             />
             <span className='message'>
                {message}
             </span>
         </div>
    ) : null
};

export default Loader;

在行动中：

export const GET_SERVICE = '[SERVICE REQUEST] GET LIST';
export const GET_SERVICE_SUCCESS = '[SERVICE REQUEST] GET LIST SUCCESS';
export const GET_SERVICE_FAILURE = '[SERVICE REQUEST] GET LIST FAILURE';

export function getService(options) {
    const request = axios.post('api/services', {options});
    return (dispatch) => {
        dispatch({
            type: GET_SERVICE
        });
        try {
            request.then((response) =>
                dispatch({
                    type: GET_SERVICE_SUCCESS,
                    payload: {data: response.data.data, meta: response.data.meta}
                })
            );
        } catch (e) {
            dispatch({
                type: GET_SERVICE_FAILURE
            });
        }
    }
}

在减速器中：

const initialState = {
    services: [],
    loading: false,
    hasErrors: false,
};

const serviceReducer = function (state = initialState, action) {
    switch (action.type) {
        case Actions.GET_SERVICE:
            return {...state, loading: true};
        case Actions.GET_SERVICE_SUCCESS:
            return {
                ...state,
                loading: false,
                services: [...action.payload.data],
                page: action.payload.meta.page,
                total: action.payload.meta.total
            };
        case Actions.GET_SERVICE_FAILURE:
            return {...state, loading: false, hasErrors: true};
        default:
            return state;
    }
};

export default serviceReducer;

在您的组件中编写以下代码：

<div className="flex flex-1 w-full">
   <Loader loading={loading} />
</div>

【讨论】：