在 React/Redux 中实现全局 Loading

在前端开发中，我们经常需要在页面加载或者进行异步操作时显示 Loading 状态，来提醒用户页面正在加载中，防止用户误操作。在 React/Redux 中，我们可以通过实现全局 Loading 组件来实现这一功能，本文将介绍如何实现全局 Loading 组件。

实现思路

我们可以通过 Redux 中间件来实现全局 Loading，具体思路如下：

1. 创建一个 loading reducer，用来管理 Loading 状态。
2. 创建一个 showLoading action，用来触发显示 Loading。
3. 创建一个 hideLoading action，用来触发隐藏 Loading。
4. 创建一个 loadingMiddleware 中间件，用来监听所有的异步操作，当异步操作开始时，触发 showLoading action，当异步操作结束时，触发 hideLoading action。

实现步骤

1. 创建 loading reducer

// javascriptcn.com 代码示例
const initialState = {
  show: false,
};

const loadingReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SHOW_LOADING':
      return {
        ...state,
        show: true,
      };
    case 'HIDE_LOADING':
      return {
        ...state,
        show: false,
      };
    default:
      return state;
  }
};

export default loadingReducer;

2. 创建 showLoading action

export const showLoading = () => ({
  type: 'SHOW_LOADING',
});

3. 创建 hideLoading action

export const hideLoading = () => ({
  type: 'HIDE_LOADING',
});

4. 创建 loadingMiddleware 中间件

// javascriptcn.com 代码示例
import { showLoading, hideLoading } from './loadingAction';

const loadingMiddleware = ({ dispatch }) => (next) => (action) => {
  if (action.type.endsWith('_REQUEST')) {
    dispatch(showLoading());
  } else if (action.type.endsWith('_SUCCESS') || action.type.endsWith('_FAILURE')) {
    dispatch(hideLoading());
  }
  return next(action);
};

export default loadingMiddleware;

5. 在 store 中使用 loadingMiddleware

import { createStore, applyMiddleware } from 'redux';
import loadingMiddleware from './loadingMiddleware';
import rootReducer from './rootReducer';

const store = createStore(rootReducer, applyMiddleware(loadingMiddleware));

export default store;

6. 创建 Loading 组件

// javascriptcn.com 代码示例
import React from 'react';
import { useSelector } from 'react-redux';

const Loading = () => {
  const show = useSelector((state) => state.loading.show);
  return show ? (
    <div className="loading">
      <div className="loading-icon"></div>
    </div>
  ) : null;
};

export default Loading;

7. 在页面中使用 Loading 组件

// javascriptcn.com 代码示例
import React from 'react';
import Loading from './Loading';

const App = () => {
  return (
    <div>
      <Loading />
      {/* 页面内容 */}
    </div>
  );
};

export default App;

总结

通过实现全局 Loading 组件，我们可以在 React/Redux 应用中方便地显示 Loading 状态，提升用户体验。本文介绍了具体实现步骤，希望对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6558231fd2f5e1655d25c341