Example how to perform redux notification (`react-notification-system`)/spinner (`material-ui`) based on `redux-store-ancillary`

AppNotification.js

import React from 'react'
// import NotificationSystem from 'react-notification-system'
import { connect } from 'react-redux'
import { hideNotification, NotificationProvider } from 'redux-store-ancillary/notification'

const mapStateToProps = (state) => ({
  notification: state.notification
})

const mapDispatchToProps = {
  hideNotification
}

class AppNotification extends React.Component {

  onShowNotification = ([notification]) => {
    // we can use notification system as an example
    console.log('showNotification', notification.id, notification.level, notification.params)
  }

  render () {
    return (
      <NotificationProvider
        notification={this.props.notification}
        onShow={this.onShowNotification} >
        <div>
          <NotificationItem timeout={2000} onClose={this.props.hideNotification} />
        </div>
      </NotificationProvider>
    )
  }
}

class NotificationItem extends React.Component { // notification instance

  state = {
    animation: false
  }

  closeTimeout = null

  componentWillUpdate (nextProps, nextState) {
    if (!nextProps.open && !this.state.animation) {
      this.setState({ animation: true })
    }
  }

  render () {
    const { id, level, params, open, onClose } = this.props

    return (
      <div>
        {this.state.animation && '---animation---' }
        Notification: {id} <br />
        level {level} <br />
        open {open.toString()} <br />
        <button onClick={() => onClose(id)} >Close</button>
      </div>
    )
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(AppNotification)

AppPopup.js

import React from 'react'
import { connect } from 'react-redux'
import { PopupProvider } from 'redux-store-ancillary/popup'

const mapStateToProps = ({ popup }) => ({
  popup
})

class AppSpinner extends React.Component {
  render () {
    return (
      <PopupProvider popup={this.props.popup} >
        <div>
          <TestPopup name='test' />
          <TestPopup name='test1' />
        </div>
      </PopupProvider>
    )
  }
}

const TestPopup = ({ name, params, open }) => {
  return (
    <div>
      <span>{name} - </span>
      <span>Open: {open.toString()}</span>
      <span>params: {JSON.stringify(params)}</span>
    </div>
  )
}

export default connect(mapStateToProps)(AppSpinner)

AppSpinner.js

import React from 'react'
import CircularProgress from 'material-ui/CircularProgress'
import { connect } from 'react-redux'

const mapStateToProps = (state) => ({
  spinner: state.spinner
})

class AppSpinner extends React.Component {
  render () {
    const wrapStyle = {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      width: '100%',
      height: '100%',
      position: 'fixed',
      top: 0,
      left: 0,
      background: 'rgba(0, 0, 0, 0.8)',
      zIndex: 10
    }

    if (this.props.spinner.rendering) return (
      <div style={wrapStyle}><CircularProgress size={60} thickness={7} /></div>
    )
    return null
  }
}

export default connect(mapStateToProps)(AppSpinner)