在使用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);
在上述示例中,当组件挂载时,通过调用setLoading action将loading状态设置为true,表示数据正在加载。在数据获取完成后,将loading状态设置为false。根据loading状态,使用条件渲染来显示Loader或数据组件。
请注意,这只是一个示例实现,具体的实现方式可能因项目结构和需求而有所不同。
领取专属 10元无门槛券
手把手带您无忧上云