CODEWITHSUNDEEP
reactjsreact-nativereact-reduxredux-formreact-lifecycle
Ash Rhazaly
Ash Rhazaly

Reputation: 215

Firing 2 Redux Actions , only 1 action is fired

I've fired an action in componentDidMount :

componentDidMount() {
  this.props.getQuests();
}

and would like to fire another action once it's completed, I've used the lifecycle method componentWillReceiveProps

componentWillReceiveProps = async nextProps => {
  if (nextProps.questObject.length !== 0) {
    const authToken = await AsyncStorage.getItem("authToken");
    this.props.getProfile(authToken);
  }
};

However only this.props.getQuests(); is fired and the 2nd action this.props.getProfile(authToken) is not being fired. 

const mapStateToProps = ({ quest, profile }) => {
  const { error, loading, questObject } = quest;

  const { profileObj } = profile;

  return { error, loading, questObject, profileObj };
};

export default connect(
  mapStateToProps,
  { getQuests, getProfile }
)(HomeScreen);

Currently it returns the following error: 

Warning: Can't call setState (or forceUpdate) on an unmounted 
component. This is a no-op, but it indicates a memory leak in your 
application. To fix, cancel all subscriptions and asynchronous tasks in 
the componentWillUnmount method.

Upvotes: 0

Views: 56

Answers (1)

CodeZombie
CodeZombie

Reputation: 2087

You are trying to update the DOM before it is mounted.when you are using componentWillReceiveProps,make sure you compare the this.props and the latest props i.e., nextProps.Otherwise,componentWillReceiveProps will render the component unnecessarily so that might lead to infinite loop.

    componentWillReceiveProps = nextProps => {
      if (this.props.questObject !== nextProps.questObject && 
          nextProps.questObject.length !== 0) {
       try {
             const authToken = await AsyncStorage.getItem("authToken");
             this.props.getProfile(authToken);
          } 
         catch(e) {
              console.log(e); 
         }
      }
    };

Upvotes: 1

Related Questions