Реагирующая навигация с Redux

Question

Я новичок в React-native и Redux. Я планирую использовать компонент Navigator для навигации. Например, есть кнопка. Когда он будет нажат, приложение перейдет к другому представлению. Я задаюсь вопросом, должен ли я позвонить толчок непосредственно в onPress или я должен позвонить отправки первый затем вызвать толчок на основе состояния?

P.S.

Например, у меня есть 3 компонента. Один контейнер (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) 

начальный экран внутри контейнера FrontScreen:

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> 
    ) 
    } 
} 

Когда кнопку Войти щелкнул, я хочу, чтобы запустить LoginScreen через LaunchScreen. Как вы видите, когда пользователь нажимает кнопку входа в систему, действие будет отправлено, а функция selectScreen вызывается редуктором.

Мой вопрос: как и когда я должен нажать Войти?

Answer 1

Вы отправляете действия в своих компонентах. Вы можете использовать саги, например, для прослушивания определенных действий из вашего магазина и выполнения операций на основе обещаний (async).

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' }) 
}