error handling higher order component & reducer

error-hoc.js

const mapState = ({ error }) => ({ error })
const mapDispatch = dispatch => bindActionCreators({ showErr, cancelErr }, dispatch)

@connect(mapState, mapDispatch)
export const error = ComposedComponent =>
  class extends Component {
    render = () => <div>
      <ComposedComponent { ...this.props }
        showErr={ this.props.showErr }
        cancelErr={ this.props.cancelErr } />

      <div onClick={ this.props.cancelErr } className="err"
           style={{ display: this.props.error === null ? 'none' : 'block' }} >
        <div className="err-msg">
            { this.props.error }
        </div>
      </div>
    </div>
  }

error-reducer.js

const START = 'app/error/START'
const CANCEL = 'app/error/CANCEL'

export const error = (state = null, action) => {
  switch (action.type) {
    case START:
      return action.msg
    case CANCEL:
      return null
    default:
      return state
  }
}

export const cancelErr = () => ({ type: CANCEL })

export const showErr = msg => dispatch => {
  dispatch({ type: START, msg })

  setTimeout( () => dispatch({ type: CANCEL }), 2000 )
}

error-usage.js

@error
export default class MyComponent extends Component {
  render = () => <h1 onClick={ this.props.showErr('OOOPS!') }>
    Click Me To Show Error!
  <h1>
}