title: My Redux state has changed, why doesn't React trigger a re-render?
body: <p>I am trying to design a notification component where notifications will appear on certain occasions (like connections problems, successful modifications, etc.).</p>
  
  <p>I need the notifications to disappear after a couple of seconds, so I am triggering a state change to delete the notification from Redux state from <code>setTimeout</code> inside the notification's <code>componentDidMount</code>.</p>
  
  <p>I can see that the state does change, but React-Redux is not re-rendering the parent component so the notification still appears on the DOM.</p>
  
  <p><strong>Here is my Redux reducer:</strong></p>
  
  <pre><code>const initialState = {
      notifications: []
  }
  
  export default function (state = initialState, action) {
    switch(action.type) {
      case CLEAR_SINGLE_NOTIFICATION:
        return Object.assign ({}, state, {
          notifications: deleteSingleNotification(state.notifications, action.payload)
        })
        case CLEAR_ALL_NOTIFICATIONS:
          return Object.assign ({}, state, {
            notifications: []
          })
        default:
          return state
      }
  }
  
  function deleteSingleNotification (notifications, notificationId) {
    notifications.some (function (notification, index) {
      return (notifications [index] ['id'] === notificationId) ?
             !!(notifications.splice(index, 1)) :
             false;
    })
  
    return notifications;
  }
  </code></pre>
  
  <p><strong>and my React components (<code>Main</code> and <code>Notification</code>):</strong></p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>/* MAIN.JS */
  class Main extends Component {
  
      renderDeletedVideoNotifications() {
          console.log('rendering notifications');
          const clearNotification = this.props.clearNotification;
          return this.props.notifications.map((notification)=&gt; {
              return &lt;Notification
                  key={notification.id}
                  message={notification.message}
                  style={notification.style}
                  clearNotification={clearNotification}
                  notificationId={notification.id}
              /&gt;
          });
      }
  
      render() {
          console.log('rerendering');
          return (
              &lt;div className="_main"&gt;
                  &lt;Navbar location={this.props.location} logStatus={this.props.logStatus}
                          logOut={this.logout.bind(this)}/&gt;
                  &lt;div className="_separator"&gt;&lt;/div&gt;
                  {this.props.children}
                  &lt;BottomStack&gt;
                      {this.renderDeletedVideoNotifications()}
                  &lt;/BottomStack&gt;
              &lt;/div&gt;
          );
      }
  
  }
  
  function mapStateToProps(state) {
      return {logStatus: state.logStatus, notifications: state.notifications.notifications};
  }
  
  function mapDispatchToProps(dispatch) {
      return bindActionCreators({checkLogStatus, logOut, clearNotification, clearAllNotifications}, dispatch);
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Main);
  
  /* NOTIFICATION.JS */
  
  export default class Notification extends Component{
      constructor(props){
          super(props);
          this.state = {show: true}
      }
  
      componentWillReceiveProps(nextProps){
          if(nextProps.message){
              this.setState({show: true});
          }
      }
  
      clearNotification(notificationId){
          this.props.clearNotifications(notificationId);
      }
  
      componentDidMount(){
          console.log('notification  mount');
          setTimeout(()=&gt;{
              console.log('timed out');
              this.props.clearNotification(this.props.notificationId);
          }, 1000);
      }
  
      closeNotification(){
          this.props.clearNotification(this.props.notificationId);
          this.setState({show: false});
      }
  
      render(){
          const notificationStyles = () =&gt;{
              if (this.props.style === "error"){
                  return {backgroundColor: 'rgba(152, 5, 19, 0.8)'}
              }
              return {backgroundColor: 'rgba(8, 130, 101, 0.8)'}
          };
  
          if(!this.state.show){
              return null;
          }
          return (
              &lt;div className="notification" style={notificationStyles()}&gt;
                  &lt;div className="notificationCloseButton" onClick={this.closeNotification.bind(this)}&gt;
                      &lt;i className="material-icons"&gt;close&lt;/i&gt;
                  &lt;/div&gt;
                  {this.props.message}
              &lt;/div&gt;
          )
      }
  
  };
  </code></pre>