0

Here is the scenario

Current Code:

componentDidUpdate () {
    if (!isEqual(this.props.data, prevProps.data)) {
        //logic
    }
}

.......

export default connect(
    state  => {
        return {
            data: getData(state),
        };
    }, {
        setData
    },
)( localize(//classname) );

Problem:

In my case, sometimes, it may happen that there are 2 consecutive redux calls that will return the same data via selector. In that case the logic inside the componentDidUpdate will not work

Reason for having 2 consecutive same data values:

I have a list of questions in a data table and I can export this quetions on the basis of selection.

If I try to export the same question / same pair of questions consecutively, I will get same data for prevProps and current props.

Ex. Say, This is the list of questions in my data table.

 1. Test Question 1
 2. Test Question 2

Say, I am selecting the first question and then clicking on Export this will extract some data from database like Question, its answer, question type, etc. and this data will be returned from selector and then I am calling the logic (the one in componentDidUpdate) to create a file with this data and download it.

If I again select the first question and click Export then the data from selector will be exact same as the previous one. And I am not able to call "the logic" here.

(Calling this logic directly on componentDidUpdate will download file frequently, even when not supposed to)

Is there any way I can trigger the event every time selector gives me a value, irrespective of the previous value selector gave to me.

Thanks in advance.

Keval Bhogayata
  • 4,422
  • 3
  • 13
  • 36
  • I think as long as your selector always returns your props data which is implemented in immutable way then current prop data & previous prop data are always different. – tmhao2005 Aug 08 '20 at 05:00
  • Added the reason for having same prop values in question @tmhao2005 – Keval Bhogayata Aug 08 '20 at 05:06
  • Is it safe to assume there are more prop updates occurring so you can't simply run the effect on *every* `componentDidUpdate` invocation? Can you provide a more complete example of your component logic? – Drew Reese Aug 08 '20 at 05:16
  • Yes, running the effect on every componentDidUpdate will be more frequent then required. @DrewReese Adding more details on example – Keval Bhogayata Aug 08 '20 at 05:18
  • 1
    when they click export, pass in `exportRequestedAt` set to the current time, then you'll have a prop that is different? – dave Aug 08 '20 at 05:30
  • Sounds more like you simply want to run some logic in response to a user's interaction rather than in response to the UI rendering (because react reasons). When they click button can you apply the logic? – Drew Reese Aug 08 '20 at 05:33
  • As I mentioned in the question, an API call is required before the main logic, Selector will make sure that the response has been received. @DrewReese – Keval Bhogayata Aug 08 '20 at 05:39
  • 1
    Well, with `componentDidUpdate` you're tied to props updating. You'll need *some* prop or state that updates when you want the effect to run. The other option is to handle it *outside* the react lifecycle with asynchronous code, like redux-thunk, redux-observables, rxjs, etc... – Drew Reese Aug 08 '20 at 05:43
  • I was looking for a generalized way in the react lifecycle that could help with all the similar scenarios, but solutions provided here by @dave and DrewReese works in my case. Thanks a lot ! I can accept requestTime as the answer for my case. – Keval Bhogayata Aug 08 '20 at 05:47

0 Answers0