Prevent react-native-router-flux from rendering all components

[yoongeemin]

Version

• react-native-router-flux v3.35.0
• react-native v0.31

Issue

It seems like whenever a redux state changes, ALL the components under the Router gets rerendered, not just the "current" component.

So lets say I have 2 components under the Router: Register and Login and both share the same authenticationReducer. Whenever an authentication event (such as user registration or signin) fails, I want to display error Alerts.

The problem is that when an error is fired from one of the components, two Alerts show up at the same time, one from each component. I assumed when I am currently on the Register scene, only the error alert would show from the Register component.

However, it seems like both components rerender whenever the redux state changes, and I see 2 alerts (In the below example, both 'Error from REGISTER' and 'Error from SIGNIN').

Here are the components:

main.ios.js

export default class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <Router>
                    <Scene key='root'>
                        <Scene key='register' component={Register} type='replace'>
                        <Scene key='signin' component={SignIn} type='replace'>
                    </Scene>
                </Router>
            </Provider>
        );
    }
}

Register.js

class Register extends Component {
    render() { 
        const { loading, error } = this.props;
        if (!loading && error) {
            Alert.alert('Error from REGISTER');
        }

        return <View>...</View>;
    }
}

const mapStateToProps = (state) => {
    return {
        loading: state.get("authenticationReducer").get("loading"),
        error:   state.get("authenticationReducer").get("error"),
    };
};

export default connect(mapStateToProps)(Register);

SignIn.js

class SignIn extends Component {
    render() { 
        const { loading, error } = this.props;
        if (!loading && error) {
            Alert.alert('Error from SIGNIN');
        }

        return <View>...</View>;
    }
}

const mapStateToProps = (state) => {
    return {
        loading: state.get("authenticationReducer").get("loading"),
        error:   state.get("authenticationReducer").get("error"),
    };
};

export default connect(mapStateToProps)(SignIn);

How do I change this so that only the REGISTER error message shows when I am currently on the Register Scene, and vice versa?

Thanks

[alphasp]

one possible approach is you can show alert after u submit your form.
eg:

dispatch(login(email, password)).then(() => {
  const { error } = this.props;
  if (error) {
    Alert.alert('Error from SIGNIN');
  }
});

[yoongeemin]

@alphasp Thanks. So the behavior I'm seeing is normal? I looked at a react native auth library called Snowflake, and it seemed like they were handling errors in the render as well..(in src/components/LoginRender.js) thought I was doing something wrong

[braco]

Yikes, this isn't good if true

[al-pt-old]

It seems like this is reproduced in v4 :(

[kwoumn3]

@apoterenko Did you ever find a workaround for this?