Dispatch action to redux from react-native-router-flux event

Question

I'm using react-native-router-flux and I don't know how to dispatch a redux action from within the toolbar actions, depending on the state when the user selects an action from the Toolbar, for example if the user is logged in and it presses the user button in the toolbar it should navigate to his profile, otherwise it should navigate to the login screen.

This is what I've tried, and it works, but it slows the application dramatically (it's not longer usable), if you take a look at the code, what's doing is initializing a "global" function and setting it to the redux store, so I can dispatch actions using it.

'use strict'
import { Router, Scene, Actions } from 'react-native-router-flux';
//redux
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from '../redux/actions-creators/actions';
function mapStateToProps(state) {
  return {
    //...
  }
}
function mapDispatchToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch);
}
const scenes = Actions.create(
  <Scene
    key="root"
    onRight={() => {
               Actions.profile({});
             }}>
    <Scene
      key="home"
      component={Home}
      title="Home"
      initial={true} />
    <Scene
      key="login"
      component={LoginScreen}
      title="Login" />
    <Scene
      key="editProfile"
      component={EditProfile}
      title="EditProfile"
      onRight={() => {
                 Actions.home({}); // this works
                 _logout(); // this is what i need to do, 
                 // it calls the function below,
                 // dispatch is not available here, this gets compiled 
                 // before the app runs
                 // this.props.logout(); // this is what i need
               }} />
  </Scene>
);
var logoutAction = () => {}; // gets assigned to the redux logout action
function _logout() {
  logoutAction(); // calls the redux logout action
}
class AppNavigator extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    logoutAction = this.props.logout; // this "hack" breaks performance
    BackAndroid.addEventListener('hardwareBackPress', function() {
      Actions.pop({});
      return true;
    });
  }
  render() {
    return <Router scenes={scenes} />
  }
}
const MainNavigator = connect(mapStateToProps, mapDispatchToProps)(AppNavigator);
export default MainNavigator;

I need to find the right way to do this, as in dispatch actions form the onRight={() => { ...here... }); method in the Scene

Another thing I tried was to put the Scene definitions inside the render() method, but the app runs much slower, this method of defining the definitions outside makes the app run much faster, but it won't allow me to call this.props, because this is undefined.

Answer 1

 <Scene
     key="dashBoard"
     component={DashBoard}
     type="reset"
     renderTitle={() =>
     <View style={Styles.renderTitleStyle}>
       <Image source={Images.logo}/>
     </View> }
     onRightButton={() => console.log('print')}
     renderRightButton={() =>
       <TouchableOpacity onPress={() => this.logOut()}>
         <Icon name="md-power" color="#FFFFFF" style={{fontSize: 25, top: 0}}/>
       </TouchableOpacity>
     }
 />

//======>>

logOut(){
 console.log('logout');
}

Answer 2

Untested so not sure if this will work but give it a shot. I also use RNRF but I don't use the onRight prop. I usually use a custom navbar and pass actions to that.

// pass the action as a prop (not sure of your logout action's location)
function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    logout: actions.auth.logout
  }, dispatch);
}
// then for onRight the action can be referenced as
onRight={() => { this.props.logout() }}