My Redux state has changed, why doesn't React trigger a re-render?
<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>