title: React Redux interval action doesn't refresh component
body: <p>I have a problem with React Redux interval action. It uses Axios to call Twitch api in 20sec interval and updates redux state. Redux state is updating successfully every time but component doesn't refresh. I have to make some other action to refresh component. What is wrong?</p>
  
  <p><strong>Store</strong></p>
  
  <pre><code>const createReduxStore = (history, initialState = {}) =&gt; {
  // ======================================================
  // Middleware Configuration
  // ======================================================
  const middleware = [routerMiddleware(history), thunk];
  
  // ======================================================
  // Store Enhancers
  // ======================================================
  const enhancers = [];
  let composeEnhancers = compose;
  
  if (process.env.APP_DEBUG) {
      if (typeof window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ === 'function') {
          composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
      }
  }
  
  // ======================================================
  // Store Instantiation and HMR Setup
  // ======================================================
  return createInjectStore(
      rootReducer,
      composeEnhancers(
          applyMiddleware(...middleware),
          ...enhancers
      )
    );
  };
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <pre><code>class LiveBarItems extends React.Component {
  
  componentDidMount() {
      this.props.dispatch(this.props.actions.initTwitch.bind(this));
  }
  
  render() {
          const { live, groups, dispatch, actions } = this.props;
  
          return (
              ..............
          )
      }
  }
  
  
  const mapStateToProps = (state) =&gt; ({
      isAuthenticated   : state.auth.get('isAuthenticated'),
      user              : state.user,
      groups            : state.user ? state.user.get('groups') : null,
      live              : state.live,
  });
  
  export default connect(mapStateToProps, dispatchToProps)(LiveBarItems);
  </code></pre>
  
  <p><strong>Actions</strong></p>
  
  <pre><code>export function initTwitch() {
  return (dispatch, getState) =&gt; {
      dispatch(twitchGetStreams());
      setInterval(() =&gt; {
          dispatch(twitchGetStreams());
      }, twitchConstatns.TWITCH_GET_STREAMS_REFRESH_TIME);
    }
  }
  
  export function twitchGetStreams() {
  return (dispatch, getState) =&gt; {
      const streams = getTwitchStreamsFromStore(getState().user);
      let groups = {};
  
      if (!streams) {
          return {
              type: twitchConstatns.TWITCH_CANCEL
          }
      }
  
      return axios.get(twitchConstatns.TWITCH_API_URL + '/streams', {
          withCredentials: false,
          headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
              'Client-ID': process.env.TWITCH_API_KEY,
          },
          params: {
              channel: streams,
          }
      })
          .then(checkHttpStatus)
          .then(response =&gt; {
              try {
                  groups = processTwitchGetStreams(response.data, getState().user, dispatch);
              } catch (e) {
  
              }
          })
          .then(() =&gt; {
              dispatch(userActions.userSet({
                  'groups': groups
              }))
          })
          .catch(error =&gt; {
  
          })
     }
  }
  </code></pre>
  
  <p>dispatch(userActions.userSet) successfully changes redux state what can I see in redux dev tool, it changes state.user and state.live which are props in my component. What is wrong? Other non-interval actions in app works great. This code samples are part of app, if some other details are required, tell me what and I'll share.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Here is my <strong>userReducer</strong>:</p>
  
  <pre><code>import { Map } from "immutable";
  import * as userConstants from '../constants/userConstants';
  import {createReducer} from '../utils';
  
  
  const initialState = Map({
      login: null,
      email: null,
      groups: null,
      settings: null,
  });
  
  export default createReducer(initialState, {
      [userConstants.USER_SET]: (state, payload) =&gt; {
          return state.merge(Map(
              payload
          ));
      },
      [userConstants.USER_CLEAR]: (state, payload) =&gt; {
          return state.merge(Map({
              'login': null,
              'email': null,
              'groups': null,
              'settings': null,
          }));
      }
  });
  </code></pre>
  
  <p><strong>Create Reducer:</strong></p>
  
  <pre><code>export function createReducer(initialState, reducerMap) {
      return (state = initialState, action) =&gt; {
          const reducer = reducerMap[action.type];
  
          return reducer
              ? reducer(state, action.payload)
              : state;
      };
  }
  </code></pre>
  
  <p><strong>User Set</strong></p>
  
  <pre><code>export function userSet(user) {
      return {
          type: userConstants.USER_SET,
          payload: user,
      }
  }
  </code></pre>
  
  <p>My live reducer have one group from user.get('groups") so if I update it in userReducer then liveReducer updates as well. </p>