Wie gehe ich bedingungsabhängig mit der Navigation in React Redux (React Native) um, basierend auf dem Ergebnis der abgesendeten Aktion?

Question

Ich habe die folgende Komponente

import { View, Text } from 'react-native'; 
import React, { Component,PropTypes } from 'react'; 
import styles from './styles'; 
import { connect } from 'react-redux'; 
import EditProfile from '../../components/common/EditProfile' 
import { saveProfile } from '../../actions/profile' 

class Profile extends Component { 

_saveProfile(){ 

    //I want to to dispatch this 
    this.props.dispatch(saveProfile()); 

    //and if success push this route 
    this.props.navigator.push({name:'Home'}); 

    //and if not, want to show an error message 
} 

render() { 
    let {profile} = this.props; 
     return (
     <View style={styles.container}> 
      <EditProfile 
       navigator={this.props.navigator} 
       profile={profile} 
       onSaveProfile={this._saveProfile.bind(this)} 
      /> 
     </View> 
    ); 
    } 
} 

Profile.propTypes = { 
    navigator: PropTypes.object.isRequired, 
}; 

function mapDispatchToProps(dispatch) { 
    return { 
     dispatch 
    }; 
} 

function mapStateToProps(state) { 
    return { 
     profile: state.get("profile").profileState 
    } 
} 

export default connect(mapStateToProps,mapDispatchToProps)(Profile); 

Ich habe folgende Aktion Schöpfer für diese ...

import facebook from '../api/facebook' 
import * as types from '../constants/ActionTypes'; 

function saveProfileSuccess(profile){ 
    return { 
     type:type.SAVE_PROFILE_SUCCESS, 
     profile:profile 
    } 
} 

function saveProfileError(error) { 
    return { 
     type:type.SAVE_PROFILE_ERROR, 
     errorMessage:error 
    } 
} 

export function saveProfile(profile){ 
    return dispatch => { 
    profile.save(profile,(error,result)=> { 
      if(error){ 
       dispatch(saveProfileError(error); 
      }else{ 
       dispatch(saveProfileSuccess(result); 
      } 
    )); 
    } 
} 

habe ich noch nichts in einem Druckminderer, weil ich nicht sicher bin, wie/was Ich muss tun, um bedingt ein Profil zu speichern, eine Fehlermeldung an die API zu behandeln, bedingte Navigation zum Startbildschirm (wie im ersten Code-Snippet gezeigt).

Wie versenden Sie eine Aktion von einer Komponente und navigieren bedingt von dieser Komponente weg, ob diese Aktion einen API-Aufruf erfolgreich macht oder nicht. Wenn es nicht erfolgreich ist, möchte ich natürlich eine Fehlermeldung anzeigen und nicht zu einer anderen Ansicht navigieren.

Answer 1

Da mein Ruf nicht hoch genug ist, kann ich keine Kommentare abgeben. Aber ich hatte Zweifel. Sie übergeben keinen Parameter als profile in Ihrer Komponente, während Sie die Aktionsmethode this.props.dispatch(saveProfile()) aufrufen, die Sie in Ihrer Aktions-Erstellerdatei export function saveProfile(profile) verwenden. Vielleicht habe ich etwas verpasst.

Basierend auf dem, was ich aus Ihrer Frage interpretiert habe, möchten Sie Navigationsvorgänge in Ihren Aktionsmethoden basierend auf Bedingungen ausführen. Wenn das der Fall ist, ist die Lösung ziemlich einfach. Übergeben Sie einfach die Navigatorreferenz (this.props.navigator) und die Parameter, die für die Navigation zum nächsten Bildschirm als Objekt erforderlich sind, wie in diesem Fall {name: 'Home'} als allgemeine Methodenparameter für die Aktion, die Sie in der Komponente aufrufen.

Für z.B. In Ihrer Komponentendatei, machen den Aufruf wie folgt:

this.props.dispatch(saveProfile(profile, this.props.navigator, {name:'Home'})); // Pass the profile parameter according to your needs 

Und dann in den Machern Aktion:

export function saveProfile(profile, appNavigator, navProps){ 
    return dispatch => { 
     profile.save(profile,(error,result)=> { 
      if(error){ 
       dispatch(saveProfileError(error); 
      }else{ 
       dispatch(saveProfileSuccess(result); 
       appNavigator.push(passProps); //Will push to Home Screen 
      } 
     }); 
    } 
}