2016-04-21 25 views
1

Ich bin neu in React-native und Redux. Ich plane, eine Navigator Komponente für die Navigation zu verwenden. Zum Beispiel gibt es eine Schaltfläche. Wenn es gedrückt wird, navigiert die App zu einer anderen Ansicht. Ich frage mich, ob ich Push direkt in onPress nennen sollte oder ich rufe sollte Versand zuerst, dann rufen Push über den Zustand basiert?React-native Navigation mit Redux

P.S.

Zum Beispiel habe ich 3 Komponenten. Eine davon ist Behälter (LaunchContainer):

export default class LaunchContainer extends Component { 
    renderScene(route,navigator) { 
    return <route.component {...route.passProps} 
     title={route.name} navigator={navigator} /> 
    } 

    render() { 
    const initialScreen = FrontScreen 
    return (
     <Navigator style={{flex:1}} 
     initialRoute={{name:'Launch',component:initialScreen}} 
     renderScene={this.renderScene} />) 
    } 
} 
const screenSelector = (store) => { 
    return { 
    inLoginScreen: store.launch.isInLoginScreen 
    } 
} 

module.exports = connect(screenSelector)(LaunchContainer) 

Das Einstiegsbild im Inneren des Behälters ist Frontscheibe:

export default class FrontScreen extends Component { 

    render() { 
    return (
     <View style={styles.container}> 
      <TouchableHighlight onPress={()=> this.props.dispatch(switchToLogin())}> 
      <Text style={styles.btnText}>LOG IN</Text> 
      </TouchableHighlight> 
     </View> 
    ) 
    } 
} 

Wenn Login Schaltfläche geklickt, ich möchte den Login starten durch LaunchScreen. Wie Sie sehen, wenn der Benutzer auf die Login-Schaltfläche klickt, wird eine Aktion ausgelöst, und die selectScreen-Funktion wird vom Reducer aufgerufen.

Meine Frage ist, wie und wann ich eine Login Komponente drücken sollte?

Antwort

1

Sie versenden Aktionen innerhalb Ihrer Komponenten. Sie könnten beispielsweise sagas verwenden, um bestimmte Aktionen in Ihrem Geschäft zu überwachen, und anschließend erfolgsbasierte (asynchrone) Vorgänge ausführen.

function* saga_example() { 
    yield take('CHANGE_TO_HOME_SCENE') 
    yield put({ type: 'SHOW_WAITING_MODAL' }) 
    const response = yield call(expensiveFunction) 
    yield put({ type: 'EXPENSIVE_RESULT', response.data}) 
    yield put({ type: 'HIDE_WAITING_MODAL' }) 
}