, у меня нет правильной идеи redux-pack
, но я достиг этого, используя react-redux
.Существует библиотека react-loading-overlay
, в которой вы можете использовать ее или создать новую loading-overlay
собственную.
https://github.com/derrickpelletier/react-loading-overlay Ссылка на библиотеку, если хотите.
Теперь перейдем ккод: -
Я создал глобальное состояние в редуксе с именем 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));