使用Redux加载状态时显示全屏图像

const LOADING_START = 'LOADING_START';
const LOADING_END = 'LOADING_END';

const startLoading = () => ({
  type: LOADING_START
});

const endLoading = () => ({
  type: LOADING_END
});

const initialState = {
  isLoading: false
};

const loadingReducer = (state = initialState, action) => {
  switch (action.type) {
    case LOADING_START:
      return {
        ...state,
        isLoading: true
      };
    case LOADING_END:
      return {
        ...state,
        isLoading: false
      };
    default:
      return state;
  }
};

import { createStore } from 'redux';

const store = createStore(loadingReducer);

import { useSelector, useDispatch } from 'react-redux';
import { startLoading, endLoading } from './actions/loadingActions';

const App = () => {
  const isLoading = useSelector(state => state.isLoading);
  const dispatch = useDispatch();

  const fetchData = () => {
    dispatch(startLoading());

    // 模拟异步操作
    setTimeout(() => {
      dispatch(endLoading());
    }, 2000);
  };

  return (
    <div>
      {isLoading && <FullScreenImage />}
      <button onClick={fetchData}>加载数据</button>
    </div>
  );
};