Firing 2 Redux Actions , only 1 action is fired

Question

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.

Are you using any redux middleware, such as `redux-thunk` or `redux-saga` etc...? — SGhaleb, Aug 18 '18 at 11:55

score 1 · Accepted Answer · answered Aug 18 '18 at 12:05

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); 
         }
      }
    };

Firing 2 Redux Actions , only 1 action is fired

1 Answers1