React-redux show hide component

import types from './types'


const INITIAL_STATE = {
  isOpen: false,
}

const iconsOpenReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case types.ICO_OPEN:
      return {
        ...state,
        isOpen: true,
      }
      case types.ICO_CLOSE:
        return {
          ...state,
          isOpen: false
        }
        default:
          return state
  }
}

export default iconsOpenReducer;

const ICO_OPEN = 'ICO_OPEN'
const ICO_CLOSE = 'ICO_CLOSE'


export default {
    ICO_OPEN,
    ICO_CLOSE
}

import types from './types'


const icoOpen = () => ({
    type: types.ICO_OPEN
})
const icoClose = () => ({
    type: types.ICO_CLOSE
})


export default {
    icoOpen,
    icoClose
}

import React from 'react';
import { connect } from 'react-redux'
import actions from '../redux/iconsOpen/duck/actions'
import MessagesScreen from './iconsScreen/messages'



const AppScreen = (props) => {

  return (
    <div className="appScreen">
      {props.isOpen ? <MessagesScreen /> : null}
      <div className="icon-div config-icon">
        <i class="fas fa-cog"></i>
      </div>
      <div
        className="icon-div calendar-icon"
        onClick={props.icoOpen}>
        <i class="far fa-calendar-alt"></i>
      </div>
      <div className="icon-div message-icon">
        <i class="far fa-envelope"></i>
      </div>
      <div className="icon-div music-icon">
        <i class="fas fa-headphones"></i>
      </div>
    </div>
  )
}


const mapStateToProps = state => ({
  iconsOpen: state.isOpen
})


const mapDispatchToProps = (dispatch) => ({
  icoOpen: isOpen => dispatch(actions.icoOpen(isOpen))
})


export default connect(mapStateToProps, mapDispatchToProps)(AppScreen);

   {props.isOpen  && (
            <your html/>
          )}