Witam. Jak zorganizować dobrze funkcjonalność logowania?. Mam kod w komponencie funkcyjnym:
const dispatch=useDispatch()
const [isLoading, setIsLoading] = useState(false)
const userState = useSelector<LoginUserState, LoginUserState>((state : any) => state.loginReducer);
React.useMemo(()=>
{
if (!userState.loggedIn && userState.error.length>0) {
message.error(userState.error)
}
},[userState])
const handleSubmit = (e:FormEvent):void => {
e.preventDefault();
props.form.validateFields(async (err, values)=>{
if (!err)
{
setIsLoading(true);
let result = await LoginCommand(values.username, values.password);
await dispatch(result)
setIsLoading(false);
}
})
}
czyli mamy wywołanie handleSubmit w momencie gdy nacisnę zaloguj. Walidacja formularza. Jeśli nie ma błędów setIsLoading powoduje kręcące się kółeczko na przycisku. potem wywołuje metodę LoginCommand, (tam jest fetch itp) i w zależności od wyniku fetch'a zwraca odpowiedni obiekt:
export const LOGIN_SUCCESS='LOGIN_SUCCESS'
export const LOGIN_FAILURE='LOGIN_FAILURE'
interface LoginSuccessAction {
type: typeof LOGIN_SUCCESS,
payload: string
}
interface LoginFailureAction {
type: typeof LOGIN_FAILURE
error: string
}
export type LoginActionTypes = LoginSuccessAction | LoginFailureAction
potem robię dispatch w celu zaaktualizowania stanu globalnego.
zaraz po dispatch chciałbym odczytać ten stan globalny no i zrobić jakieś przekierowanie do głównej aplikacji. Ale okazuje się, że będąc jeszcze w zdarzeniu handleSubmit nie widzę, zaaktualizowanego stanu userState.
Jedyne rozwiązanie jakie mi zadziałało to useMemo. Na obecną chwilę to jest tylko wyświetlenie komunikatu z błędem logowania. Jak zorganizować dobrze kod, żeby to chodź trochę profesjonalnie? :)