Example of polling api call

[adamjw3]

Do you have an example of using redux and polling api call every x seconds but only updating the ui if the data is different then the previous fetch?

[yoyoyohamapi]

@adamjw3 I guess your case may be implemented by next steps, but the code is untested:

step 1：

in your UI Components, dispatch an action to start a polling task:

class List extends React.Component {
  componentDidMount() {
    this.props.dispatch({
      type: 'START_POLLING'
   })
  }

  componentWillUnmount() {
    this.props.dispatch({
       type: 'STOP_POLLING'
    })
  }
}

step 2:

in your epic:

const pollingEpic = (action$, state$) {
  const stopPolling$ = action.pipe(
    ofType('STOP_POLLING')
  )
  return action$.pipe(
    ofType('START_POLLING'),
    withLatestFrom(state$, (state) => {
      // build request params
      const params = {
        // ...
      }
      return params
    }),
    switchMap(params => {
       return timer(0, x* 1000).pipe(
          takeUtil(stopPolling$), 
          switchMap(() => from(api.fetch(params))),
          distinctUntilChanged(isDeepEqual),
          map(data => ({type: 'FETCH_SUCCESS', payload: data}))
       )
    })
  )
}

[adamjw3]

@yoyoyohamapi ok, does that epic go in my redux reducers? Do you have a full example with source code on codepen or something like that. Just struggling to see how this fits into my current redux actiohs and reducers

[yoyoyohamapi]

@adamjw3 I create a repo to compare redux-thunk with redux-observable few weeks ago: https://github.com/yoyoyohamapi/self-government-component-with-redux-observable。It's built based on Github API，and the user page is based on redux-observable with a polling task: https://github.com/yoyoyohamapi/self-government-component-with-redux-observable/blob/master/src/epics/user.ts

[justusromijn]

In the epic part: I think you miss an arrow at the first line:

const pollingEpic = (action$, state$) => {

                                  ^^

And I guess it should be the operator takeUntil, which makes sense for stopping the polling:

``takeUntil(stopPolling$),`

  ^

Other than that, thanks for the example code!