Асинхронный запрос о React Native

Question

Теперь я использую React Native с Firebase для создания проекта. Логика проста: я хочу, чтобы сообщения об ошибках отображались на экране после сбоя loginUser (). Тем не менее, из-за проблемы asy, сообщения об ошибках не будут появляться при первой неудачной попытке входа в систему, потому что loginUser еще не завершен, и в последний раз, когда я успешно войду в систему, сообщения все еще появляются, потому что состояние успешной регистрации не изменилось.

onButtonPress() {
      const { email, password } = this.props;
      this.props.loginUser({ email, password });

      this.renderError();
  }

Я отправляю запрос loginUser в Firebase, а затем, если вход успешный, состояние «ошибка» будет пустым. Но это не удалось, «Ошибка» будет строкой. Соответствующие действия и редукторы показаны ниже.

export const loginUser = ({ email, password }) => {
  return (dispatch) => {
    dispatch({ type: LOGIN_USER });

    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(user => loginUserSuccess(dispatch, user))
      .catch(() => loginUserFail(dispatch));
  };
};

внутри редуктора:

case LOGIN_USER_SUCCESS:
      return {
        ...state, user: action.payload, error: '', loading: false, password: ''
      };
    case LOGIN_USER_FAIL:
      return {
        ...state, error: 'Authentication Failed', password: '', loading: false
      };

Я не знаю, как справиться с этой проблемой, как я могу убедиться, что функция renderError () будет представлена ​​только после завершения LoginUser?

Answer 1

Вы выполняете асинхронный фрагмент кода синхронно. Во-первых, вы должны return firebase.auth() в вашем действии. Затем вы можете использовать обещания this.props.loginUser({ email, password }).then(/* .. */), then() будет выполнено после того, как Firebase ответит на запрос. Наконец, добавьте условие, основанное на вашем состоянии, которое охватывает ваш this.renderError(), обычно это должно быть в вашем JSX, а не в логике вашей функции.