title: Component can't catch up with redux state
body: <p>Help me please solve this issue.
  I use redux and react-redux to control state in my app.
  But when I try to change styles in my Component depending in the value from redux store, it react with delay. When I add new Item and click the list and expect its color being changed, it does this only after I add another item, so that it always delays.
  Here is my reducer </p>
  
  <pre><code>export const items = (state = [], action) =&gt; {
  switch(action.type) {
      case 'ADD_ITEM':
          const newItem = {
              title: action.title,
              id: action.id,
              selected: action.selected,
              comments: action.comments
          };
          return [
              ...state,
              newItem
          ];
      case 'REMOVE_ITEM':
          return state.filter(({ id }) =&gt; id !== action.id);
      case 'SELECT_ITEM':
          state.map((item) =&gt; {
              if (item.id === action.id) {
                  return [
                      ...state,
                      item.selected = true
                  ];
              } else {
                  return [
                      ...state,
                      item.selected = false
                  ];
              }
          });
      default:
          return state;
  }
  };
  </code></pre>
  
  <p>Here is my component which I want to react on every change of the redux store</p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  import { removeItem, selectItem } from '../actions/items';
  import { Badge, ListGroup, ListGroupItem, Button } from 'reactstrap';
  
  const stylesForActiveItem = {
      borderLeft: '4px solid red',
      transition: 'all .5s',
      marginLeft: '-4px',
      borderRadius: '0'
  }
  
  class Item extends React.Component {
      constructor(props) {
          super(props);
      }
      render() {
          const { removeItem, selectItem, id, title, selected } = this.props;
          return (
              &lt;ListGroup className="Item"&gt;
                  &lt;ListGroupItem 
                      onClick={() =&gt; selectItem({ id })}
                      className={selected ? 'Item__text active-item' : 
  'Item__text'}
                  &gt;{title} &lt;Badge className="Item__badge"&gt;14&lt;/Badge&gt;
              &lt;/ListGroupItem&gt;
              &lt;Button className="Item__btn" onClick={() =&gt; removeItem({ id 
  })}&gt;Delete&lt;/Button&gt;
          &lt;/ListGroup&gt;
      );
  }
  }
  
  const mapDispatchToProps = (dispatch) =&gt; ({
  removeItem: (id) =&gt; dispatch(removeItem(id)),
  selectItem: (id) =&gt; dispatch(selectItem(id))
  })
  
  export default connect(null, mapDispatchToProps)(Item);
  </code></pre>