Is it possible to dispatch action from the store?

[amorphius]

I know that this is bad idea, but I'm ultimately careful with this and don't know another option.
I have action handler inside the store which should emit actions through setInterval every few seconds. Is it possible or the only options is to move setInterval to component?

[emmenko]

move setInterval to component

I think this would be the solution yes.

componentDidMount () {
  this.interval = setInterval(() => {
    this.props.actions.doSomething()
  }, 2000)
}

componentWillUnmount () {
  clearInterval(this.interval)
}

[amorphius]

Yes, but it seems like a hack, not real "architectural" solution, because starting this timer is normal business logic and I cannot handle it in the store, but component.

So, I have buttons to start and stop timer, but what if those buttons are not in the same component? What is right approach to handle this with redux stores and actions?

[rpominov]

I believe this is what async action creators for. You can not only dispatch actions from them asynchronously, but also dispatch multiple actions or none. The code may look something like this:

import { TIMER_STARTED, TIMER_TICK, TIMER_STOPPED } from '../constants/ActionTypes';

export function startTimer() {
  return (dispatch, getState) => {
    const { timerId } = getState();
    if (timerId === null) {
      const timerId = setInterval(() => {
        dispatch({type: TIMER_TICK})
      }, 1000)
      dispatch({type: TIMER_STARTED, payload: timerId}) // a store supposed to save `timerId`
    }
  }
}

export function stopTimer() {
  return (dispatch, getState) => {
    const { timerId } = getState();
    if (timerId !== null) {
      clearInterval(timerId)
      dispatch({type: TIMER_STOPPED, payload: timerId}) // now store supposed to set `timerId` to `null` 
    }
  }
}

[johanneslumpe]

If this is business logic you do not want to handle in your component, you can create a business logic object, which does that for you. So instead of having this inside the component you would have an object which subscribes to your redux instance.

If you want to start the timer you send out a START_TIMER action. The reducer in your store then sets timerShouldStart or how you may call it to true. Your business logic object will pick up the change and in the handler start the timer:

const business = {
  timer: null,
  maybeStartTimer() {
    // clean out old timer
    clearInterval(business.timer);
    // redux has been defined somewhere in scope
    const { timerStore } = redux.getState();
    if (timeStore.timerShouldStart) {
      business.interval = setInterval(() => {
        // the actions are accessible as well
        redux.dispatch(doSomething());
      }, 2000)
    }
  }
}

redux.subscribe(::business.maybeStartTimer);

Stopping could then be done with a STOP_TIMER action. The reducer would just set the variable back to false and the object would clear the timer.

[johanneslumpe]

@rpominov I'm not sure I would store the timer id in the store, as it is not serializable (or rather, has no meaning if sent over the wire). But I do like your way of having the TICK dispatch in there

[rpominov]

@johanneslumpe Good point, my solution probably won't work in an isomorphic app.

[amorphius]

@rpominov Great, I like your solution, and in isomorphic app I would handle timer initialization manually.

[gaearon]

I'd like to see this in #140

[taylorhakes]

Would this be the best way to handle WebSockets as well or is there another pattern?

[gaearon]

@taylorhakes Seems sensible to me.

[pnkapadia6]

So what is the solution to make a timer work? @rpominov's suggestion?

[markerikson]

I actually threw together a proof-of-concept for a timer middleware a while back. Haven't actually tested it myself, but ought to demonstrate the idea: https://gist.github.com/markerikson/ca96a82d6fdb29388aca4052a9455431