CODEWITHSUNDEEP
reactjsreduxreact-lifecycle
Zouari Moez
Zouari Moez

Reputation: 73

Cancel Redux Action after Unmount

I want to cancel some functions after component unmount because it causes memory leak my code looks like this 

componentDidUpdate(prevProps) {
    if (prevProps.org.org !== this.props.org.org && this.mounted) {
      this.props.clearGraph();
      this.props.graphGet(this.props.org.org);
      this.setState({ org: this.props.org.org });
    }
  }
  componentDidMount() {
      const abox = "a" + this.props.org.org.substr("1");
      this.props.getHistory(abox);
      this.props.graphGet(this.props.org.org);
  }
  componentWillUnmount() {
  }

all I want is to cancel graphGet which is a redux action

Upvotes: 3

Views: 2046

Answers (1)

Nappy
Nappy

Reputation: 3046

You cannot cancel Redux actions by design. Once they get dispatched, they are processed by reducers and the state transition is performed.

You can however dispatch another action to revert the state changes or causing side effects. Normally you would use another library like redux-observable for the latter.

You can for example define 3 actions: START_GRAPH_GET, CANCEL_GRAPH_GET and FINISH_GRAPH_GET. On START you start your fetch, on CANCEL you cancel any outstanding fetches and once a fetch completes you dispatch FINISH and keep the result in the store.

In order to render the results you would need to use react-redux connect with a mapStateToProps function.

To cancel on unmount, you would just dispatch an CANCEL action, if necessary.

Since your code does not show anything related to Redux at all, I think a more general answer is reasonable here.

Upvotes: 2

Related Questions