I'm trying to update the clock in the root component. The general view of the application is:

<App> <Input/> {timer} </App>

Initially, the default city is loaded from the store, after that I set the initial time value (setTime ()):

 componentWillMount() { const { setTime, timeOffset } = this.props; setTime(timeOffset); };

Then, respectively, I launch setInterval, the timer for the current city is running, the clock is working:

 componentDidMount() { const { setTime, timeOffset } = this.props; this.timer = setInterval(() => { setTime(timeOffset); }, 1000); }

After in the submission I get the coordinates of the newly entered city, I get a fresh time zone - everything is asynchronous, the props change with a delay by themselves. How now to restart the clock / timer by setTime () with the new value of timeOffset, which exactly comes in app.props? Tried to restart the timer deferred, tried out the options that the functions of the life cycle provide. Either overlooked something - did not finish reading, or do you completely need to change the logic of the timer?

  • you have already done everything wrong, you have the computational logic in the interface, it should be put into action. The action will dispute the event, the event will change the global state, the state will change the data in the interface (this is if you use redux for its intended purpose) - Vasily Barbashev
  • That is, the part with setInterval () is also put into action? Did I understand you correctly? - Zimson
  • Well, creating and stopping the timer in an action, yes, and dispatching to the reducer send the parameters you need - Vasily Barbashev
  • Thank. Poked in the right direction. Found examples of implementations, I will disassemble. - Zimson

0