我有一个应用程序,其中有多个组件以及每个组件的操作和减速器。我也在使用 redux-pack 进行承诺处理。
所以情况就是这样,我只想为我的整个应用程序使用一个减速器来处理我的页面加载器。这意味着,每当 API 调用开始时,加载程序都应该显示,而在 API 结束时应该隐藏。我不想为此编写单独的操作。
请帮我提出您的建议。提前致谢。
我有一个应用程序,其中有多个组件以及每个组件的操作和减速器。我也在使用 redux-pack 进行承诺处理。
所以情况就是这样,我只想为我的整个应用程序使用一个减速器来处理我的页面加载器。这意味着,每当 API 调用开始时,加载程序都应该显示,而在 API 结束时应该隐藏。我不想为此编写单独的操作。
请帮我提出您的建议。提前致谢。
,我没有正确的想法redux-pack
,但我已经使用react-redux
. 有库react-loading-overlay
库,您可以使用它或创建一个新loading-overlay
的库。
https://github.com/derrickpelletier/react-loading-overlay库的链接(如果需要)。
现在来看代码:-
我在 redux 中创建了一个全局状态,名为loadingState
//this is my action.
export const ENABLE_OR_DISABLE_LOADING = 'ENABLE_OR_DISABLE_LOADING';
export function enableOrDisableLoading (value = true, msg='Loading your content') {
return {
type: ENABLE_OR_DISABLE_LOADING,
payload: {isLoading: value, msg: msg}
};
}
//this is my reducer.
export function loading(state={isLoading: false, msg: 'Please wait...'}, action) {
switch (action.type) {
case ENABLE_OR_DISABLE_LOADING:
return action.payload;
default:
return state;
}
}
Add this reducer to your store.
My HOC is like this.
import LoadingOverlayWrapper from 'react-loading-overlay';
class AdminImpl extends React.Component {
return (
<LoadingOverlayWrapper
active={this.props.isLoading}
spinner
zIndex={1000}
className="height100"
text={this.props.msg}
>
<SideBar/>
{this.props.child}
</LoadingOverlayWrapper>
);
}
const mapStateToProps = (state) => {
return state.loading;
};
export const Admin = connect(mapStateToProps)(AdminImpl);
Now dispatch action from anywhere from your app.
//start Loading state
store.dispatch(enableOrDisableLoading(true, 'Your loading msg'));
//start Loading state
store.dispatch(enableOrDisableLoading(false));