withLoader HOC组件:
const withLoader = (WrappedComponent: any) => (props: any) => {
if (props.loading) {
return (
<Styled.LoaderWrapper>
<Styled.LoaderContent>
<Styled.Fa icon={faSpinner} spin />
</Styled.LoaderContent>
</Styled.LoaderWrapper>
);
}
return <WrappedComponent {...props} />;
};
export default withLoader;
Login.tsx组件:
const LoginPage = () => {
const [login, setLogin] = useState<string>('');
const [password, setPassword] = useState<string>('');
const authUser = (): void => {
dispatch(getJWT(login, password));
};
return (
// markup goes here
);
};
export default withLoader(LoginPage);
现在我不明白了。当我在authUser()
中调度动作时,我想显示装载程序(高阶组件),例如:
const authUser = (): void => {
// there we start showing loader
dispatch(getJWT(login, password)); // this action sends a POST request with credentials, then receives an access_token
// there we end showing loader
};
我实际上如何将loading
道具传递给我的HOC?