1

There's a component (comp1), in which inside componentDidMount, I have set a periodic call. 

componentDidMount(){
    window.setInterval(() => this.func1(), 5000);
}

callback function is also within the same component as below, (initial counter value is set to 100)

func1(){
    console.log('Count', this.props.counter);
    this.props.decrement();
}

in which, I have dispatched an action to decrements the counter value, which is stored in redux store. (counter value is mapped from state as usual)

This works fine and I can see the results as expected.

But the issue comes when I change the component (basically change the route). Periodic functions runs in the background, but it's not updating the value.

For ex: Let's say I'm here in this component for 30 seconds, so the counter value is 94 (initial value is 100). But when I change the route to another component, although the periodic function is running after every 5 seconds as expected, the value is stuck at 94. (But in the redux dev tools I can see the correct value and it's updating)

Note: there's a business scenario behind that and I tried to simplify the usecase above. But I managed to get the expected behavior by calling another outside function from the func1, and get the store values inside that (I'm using redux-saga).

Can someone explain the behaviour here? I think it's because of the immutability of the redux store.

EDIT To me, it's not basic parent-child props update question. I don't know why it marked as duplicate. Because it's not about updating a props in different component.

PrasadW
  • 44
  • 7
  • props change you have to use componentWillReceiveProps lifecycle because this lifecycle receives the updates props every time – Kishan Jaiswal Apr 02 '19 at 04:53
  • or use componentWillUpdate lifecycle – Kishan Jaiswal Apr 02 '19 at 04:54
  • @KishanJaiswal What you said is correct regarding prop updates. But two things I need to point out, 1. My intention is to run a periodic function which needs to start when I come to this component. For that I cannot use componentWillReceiveProps or componentWillUpdate. 2. When I'm in this component, I can still see the updated values – PrasadW Apr 02 '19 at 05:01

0 Answers0