title: React redux api polling every x seconds
body: <p>I've got this working but i'm after a more 'best practice way'.</p>
  
  <p>its using the <a href="https://icanhazdadjoke" rel="noreferrer">https://icanhazdadjoke</a> api to display a random joke that gets updated every x seconds. is there a better way of doing this?</p>
  
  <p>eventually i want to add stop, start, reset functionality and feel this way might not be the best.</p>
  
  <p>Any middleware i can use?</p>
  
  <p>Redux actions</p>
  
  <pre><code>// action types
  import axios from 'axios';
  export const FETCH_JOKE = 'FETCH_JOKE';
  export const FETCH_JOKE_SUCCESS = 'FETCH_JOKE_SUCCESS';
  export const FETCH_JOKE_FAILURE = 'FETCH_JOKE_FAILURE';
  
  
  function fetchJoke() {
    return {
      type: FETCH_JOKE
    };
  }
  
  function fetchJokeSuccess(data) {
    return {
      type: FETCH_JOKE_SUCCESS,
      data
    };
  }
  
  function fetchJokeFail(error) {
    return {
      type: FETCH_JOKE_FAILURE,
      error
    };
  }
  
  export function fetchJokeCall(){
    return function(dispatch){
      dispatch(fetchJoke());
      return axios.get('https://icanhazdadjoke.com', { headers: { 'Accept': 'application/json' }})
      .then(function(result){
        dispatch(fetchJokeSuccess(result.data))
      })
      .catch(error =&gt; dispatch(fetchJokeFail(error)));
    }
  }
  </code></pre>
  
  <p>Redux reducer</p>
  
  <pre><code>import {combineReducers} from 'redux';
  import {FETCH_JOKE, FETCH_JOKE_SUCCESS, FETCH_JOKE_FAILURE} from '../actions';
  
  const defaultStateList = {
    isFetching: false,
    items:[],
    error:{}
  };
  
  const joke = (state = defaultStateList, action) =&gt; {
    switch (action.type){
    case FETCH_JOKE:
      return {...state, isFetching:true};
    case FETCH_JOKE_SUCCESS:
      return {...state, isFetching:false, items:action.data};
    case FETCH_JOKE_FAILURE:
      return {...state, isFetching:false, error:action.data};
    default:
      return state;
    }
  };
  
  const rootReducer = combineReducers({
    joke
  });
  
  export default rootReducer;
  </code></pre>
  
  <p>Joke component</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import PropTypes from 'prop-types';
  import { fetchJokeCall } from '../actions';
  
  
  class Joke extends Component {
    componentDidMount() {
      this.timer = setInterval(()=&gt;  this.props.fetchJokeCall(), 1000);
    }
    componentWillUnmount() {
      clearInterval(this.timer)
      this.timer = null;
    }
    render() {
      return (
        &lt;div&gt;
          {this.props.joke.joke}
        &lt;/div&gt;
      );
    }
  }
  
  Joke.propTypes = {
    fetchJokeCall: PropTypes.func,
    joke: PropTypes.array.isRequired
  };
  
  function mapStateToProps(state) {
    return {
      joke: state.joke.items,
      isfetching: state.joke.isFetching
    };
  }
  
  export default connect(mapStateToProps, { fetchJokeCall })(Joke);
  </code></pre>