CODEWITHSUNDEEP
reactjsreduxfluxreactjs-fluxreact-redux
JulienD
JulienD

Reputation: 7293

Flux/Redux trigger a side-effect at the end of an action

I can't understand how to make such a pattern work in Flux/Redux:

But I cannot trigger an action at the end, because it would trigger re-rendering infinitely. Is there some recommended way to do this?

The best I could imagine was to draw on the canvas in my reducer/action, and update only the state of the second component as the result of the action. But then if it is re-rendered somehow otherwise, the canvas will be empty.

In flux I would use a setTimeout(, 0) hack and two different stores, but it does not work with Redux as all listen to the same store.

Upvotes: 0

Views: 452

Answers (1)

David Gilbertson
David Gilbertson

Reputation: 4873

If you're doing lots of async stuff there's plenty of redux async libraries and well documented approaches. However if this is the only part of your app that needs to wait for something else to finish I might suggest having a status like DATA_PROCESSING_STATUS in the store. When you first get the new data, you set this to "processing", when it's finished, you dispatch another event to set the status to "done".

Then in your second component, react to the change.

  componentWillReceiveProps(newProps) {
    const wasProcessing = this.props.DATA_PROCESSING_STATUS === 'PROCESSING';
    const isNowNotProcessing = newProps.DATA_PROCESSING_STATUS !== 'PROCESSING';
    if (wasProcessing && isNowNotProcessing) {
      // new data is ready, use it in some way
    }
  }

IMO it's a fairly fiddly approach, but if this is the only instance of wanting to do something async, then the fiddlyness is contained here. Implementing a full-on async flux flow might be overkill in that case.

Upvotes: 1

Related Questions