使用redux使用相同值更新状态时组件未更新

Question

I have a login flow in my react native app. When the user enters its credentials, an action is dispatch that verifies them and then dispatch an other action in order to modify the state by the reducer.

In my component, I register to changes this way:

function mapStateToProps(state) {
  return { userConnected: state.user.connected }
}

export default connect(mapStateToProps)(LoginScreen)

And I perform action when new props are received with that function:

async componentWillReceiveProps(newProps){
  if(newProps.userConnected){
    this.props.navigation.navigate("Home");
  }else{
    this.showWrongCredentials();
  }
}

The first time when the user enters wrong credentials, the props are updated with connected = false, so it shows the wrong credentials message. If the user clicks another time with some wrong credentials, the state received the same values connected = false , so the method componentWillReceiveProps is not called and I cannot show the wrong credentials message again.

How can I do that ? Everytime the state is updated, even if the values are the same, I would like the method componentWillReceiveProps to be fired.

Answer 1

Yes, such behaviour is by design.

From react-redux doc

If performance is a concern, the best way to improve performance is to skip unnecessary re-renders, so that components only re-render when their data has actually changed

Or if you like source

Note that selectorFactory is responsible for all caching/memoization of inbound and outbound props. Do not use connectAdvanced directly without memoizing results between calls to your selector, otherwise the Connect component will re-render on every state or props change .

You mentioned that user clicks when entered credentials. I suggest to change some property of store as a result of user click. So for every click credentials will be verified and message printed.

Introduce additional variable to store which will be used as flag for every user click after credential has been entered. It can be named credentialEnteredFlag and set to true every time user entered credentials. Then have action to reset credentialEnteredFlag to false from componentWillReceiveProps .

componentWillReceiveProps will look like

async componentWillReceiveProps(newProps){
    if(newProps.credentialEnteredFlag){
        this.props.resetCredentialEnteredFlag();

        if(newProps.userConnected){
            this.props.navigation.navigate("Home");
        }else{
            this.showWrongCredentials();
        }
    }
}