React Native - перемещение после действия async

Question

Я разрабатываю мобильное приложение с React Native и Redux, и я столкнулся с проблемой разработки программного обеспечения. Я хочу вызвать REST API (асинхронная операция) для входа и перейти к основному виду, если эта операция прошла успешно. Я использую redux и thunk, поэтому у меня уже есть асинхронные действия, поэтому мое главное сомнение: где я должен поставить логику для перехода к основному виду?

Могу ли я получить доступ к объекту навигатора непосредственно из действия и выполнить навигацию там? Должен ли я сделать это в компоненте входа? (Поскольку я делаю это уже - проверьте код ниже).

componentWillReceiveProps(nextProps){ 
    if(nextProps.errorLoginMsg){ 
     Alert.alert("Login Failed", nextProps.errorLoginMsg); 
    } 
    else if(!nextProps.user.isNull()){ 
     this.props.navigator.replace({name: 'main'}); 
    } 
    } 

Я не уверен в наличии этой логики в компоненте. Не кажется хорошей практикой. Есть ли другой способ сделать это?

Благодаря

Answer 1

Это одна из самых сложных проблем в реагирующих родной с текущим Navigator API. Я предлагаю иметь хранилище маршрутов, которое поддерживает текущий маршрут, и имеет компонент, который включает навигатор, подключенный к этому магазину, и имеющий навигацию, инициированную по адресу componentWillReceiveProps.

Answer 2

Вот код, как я это делаю:

   const resetAction = NavigationActions.reset({ 
        index : 0, 
        actions: [ 
         NavigationActions.navigate({ routeName: 'Home' }) 
        ] 
       }); 

       this.props.requestDeleteEvent({ 
        id: eventID 
       }).then(() => { 
        this.props.navigation.dispatch(resetAction); 
       }); 

А внутри функции requestDeleteEvent:

export function requestDeleteEvent(requestData) { 
    const id = requestData.id; 

    return (dispatch, getState) => { 
     return fetch(Config.event + id, { 
      method: 'DELETE', 
      headers: { 
       'Content-Type': 'application/json; charset=UTF-8', 
      }, 
     }) 
      .then((response) => getResponseJson(response)) 
      .then((responseJson) => { 
        if (responseJson.isSuccess) { 
         return dispatch(deleteEvent(id)); 
        } 
        else { 
         return dispatch(triggerToast({type: 'alert', content: ERROR})); 
        } 
       } 
      ); 
     } 
    }