Попытка переписать этот метод с помощью реакционных хуков:
this.setState({
isPerformingAuthAction: true
}, () => {
auth.signInWithEmailAndPassword(emailAddress, password).then((value) => {
this.closeSignInDialog(() => {
const user = value.user;
const displayName = user.displayName;
const emailAddress = user.email;
this.openSnackbar(`Signed in as ${displayName || emailAddress}`);
});
}).catch((reason) => {
const code = reason.code;
const message = reason.message;
switch (code) {
case 'auth/invalid-email':
case 'auth/user-disabled':
case 'auth/user-not-found':
case 'auth/wrong-password':
this.openSnackbar(message);
return;
default:
this.openSnackbar(message);
return;
}
}).finally(() => {
this.setState({
isPerformingAuthAction: false
});
});
});
isPerformingAuthAction - это свойство компонента, которое отключает кнопки при выполнении различных действий.
<Button disabled={state.isPerformingAuthAction} ... />
Проблема: я использую useReducer для управления локальным состоянием, а isPerformingAuthAction является свойством reducerState. useReducer не возвращает обещание, поэтому я не могу сделать это:
dispatch({type:"isPerformingAuthAction", payload: true}).then(auth.stuff)
Я думал об использовании вместо этого useState, но у него нет обратного вызова, как this.setState с классами.
Я пытался обернуть голову вокруг некоторых способов использования эффекта для извлечения данных и асинхронности. Я довольно смущен этим, но я думаю, что мог бы иметь «isPerformingAuthAction» или состояние от редуктора как зависимость и использовать useEffect обновлять компонент, когда он изменяется, но свойство «isPerformingAuthAction» изменяется и по другим причинам, а не просто auth.signInWithEmailAndPassword(emailAddress, password)
, но signUp, signOut и несколько других.
Таким образом, когда «isPerformingAuthAction» изменяется на true, кнопки отключаются, поэтому пользователь вынужден ждать ответа от сервера. Я хочу убедиться, что эти кнопки отключены (состояние обновлено / компонент перерисован с помощью неактивных кнопок), прежде чем я вызову auth.whither.