React-native navigation with Redux

Question

I'm new in React-native and Redux. I'm planing to use a Navigator component for navigation. For example, there is a button. When it's pressed, the app will navigate to another view. I'm wondering whether I should call push directly in onPress or I should call dispatch first then call push based on the state?

P.S.

For example, I have 3 components. One is container (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)

The initial screen inside the container is 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>
    )
  }
}

When login button clicked, I want to launch the LoginScreen through LaunchScreen. As you see, when user click the login button, the an action will be dispatched then the selectScreen function is called by reducer.

My question is how and when I should push a Login component?

duketwo duketwo · Accepted Answer · 2016-04-22T00:10:22

You dispatch actions within your components. You could use sagas for example to listen for specific actions from your store and execute promise based (async) operations afterwards.

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

React-native navigation with Redux

1 Answers