How to navigate to another screen after dispatch an action using redux

Question

After dispatching an action to create a new object by the API, it returns it on mapStateToProps. On componentDidUpdate callback I am able to get the object mapped to props and open the detail screen passing it. The problem is that when I go back and try to create a new object (just fill the form) it keeps calling componentDidUpdate with the recenty created object in props (as I am setting state with the content that the user types and this.props.deck is still is in there.

Is there another lifecycle which I am able to not get any trash in props or another logic?

My dispatch action:

this.props.createDeck(deckToBeCreated)  // dispatch an action to create a deck

Part of my reducer:

case ADD_NEW_DECK_SUCCESS: 
     return {
         ...state,
         deck: action.deck,
     }

if successfull I will get this deck object created by the API in here:

function mapStateToProps({specificDeckReducer}) {
    return {
        deck: specificDeckReducer.deck
    }
}


 componentDidUpdate() { // THE PROBLEM IS HERE.
        const { deck } = this.props
        if (deck != null && deck.id) {
            this.showDeckDetail(deck)
            this.reset()
        }
    }

Answer 1

You can set up your componentDidUpdate() so that it only runs when you get an updated prop.

componentDidUpdate(prevProps){
   if(prevProps.deck !== this.props.deck){
     //do something
   }
}

That way the lifecycle event won't keep firing. So you should be able to freely navigate without worrying about the component events.