SImple React Redux Notification. Single notification at a time

app.js

import React, { PureComponent } from 'react';
import NotificationContainer from './../../containers/notificationContainer';

class App extends PureComponent {
  render() {
    return (
      <div>        
        <h1>Home</h1>
        <NotificationContainer />
      </div>
    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import store from './store';
import App from './components/app';

const root = document.getElementById('root');

ReactDOM.render(<App />, root);

notificationContainer.js

import React, { PureComponent } from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import './notificationContainer.css';

class NotificationContainer extends PureComponent {
  constructor(props) {
  	super(props);

    this.state = {
      notificationVisible: true,
    };
  }
  
  componentWillReceiveProps(nextProps) {
    if (nextProps.notification.text) {
      this.setState({ notificationVisible: true });
    }
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.refs.showingNotification) {
      setTimeout(() => {
        this.props.removeAlert();
        this.setState({
          notificationVisible: false,
        });
      }, 3000);
    }
  }

  handleClick() {
    this.props.removeAlert();
  }

  render() {
    const { notification } = this.props;
    
    if (notification.text) {
      const className = `message ${this.state.notificationVisible ? 'notification-shown' : 'notification-hidden'}`;
      return (
        <div className={className} onClick={this.handleClick.bind(this)} ref="showingNotification">
          <p>{notification.text}</p>
        </div>
      );
    }
    return null;
  }
}

function mapStateToProps(state, ownProps) {
  return {
    notification: state.notificationReducer,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    removeAlert() {
      dispatch({ type: actionType.REMOVE_ALERT });
    },
  };
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(NotificationContainer));

reducer.js

const notificationReducer = (state = {}, action) => {
  switch (action.type) {
    case 'ADD_ALERT':
      return ({
        text: action.text,
      });
    case 'REMOVE_ALERT':
      return ({
        text: '',
      });
    default:
      return state;
  }
};

export default notificationReducer;

store.js

import thunk from 'redux-thunk';
import { applyMiddleware, createStore, combineReducers } from 'redux';

import notificationReducer from './reducers/notificationReducer';

export default createStore(
  combineReducers({
    notificationReducer,
  }),
  applyMiddleware(thunk),
);