如何在API使用redux获取数据之前显示Loader？

// actions.js
export const setLoading = (isLoading) => ({
  type: "SET_LOADING",
  payload: isLoading,
});

// reducer.js
const initialState = {
  loading: false,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "SET_LOADING":
      return {
        ...state,
        loading: action.payload,
      };
    default:
      return state;
  }
};

// Component.js
import React, { useEffect } from "react";
import { connect } from "react-redux";
import { setLoading } from "./actions";

const Component = ({ loading, setLoading }) => {
  useEffect(() => {
    // Simulate data fetching
    setLoading(true);

    // Make API call or fetch data

    // After data is fetched
    setLoading(false);
  }, []);

  return (
    <div>
      {loading ? <Loader /> : <DataComponent />}
    </div>
  );
};

const mapStateToProps = (state) => ({
  loading: state.loading,
});

const mapDispatchToProps = {
  setLoading,
};

export default connect(mapStateToProps, mapDispatchToProps)(Component);