dispatch action to close modal

I have reducer which hides and display a modal component;

import {SHOW_MODAL, HIDE_MODAL } from '../constants/ActionTypes'


import React from 'react';
import {connect} from 'react-redux';

import * as actions from '../actions';

const initialState = {
  modalType: null,
  modalProps: {}
}

export default function modal(state = initialState, action) {
  switch (action.type) {
    case 'SHOW_MODAL':
      return {
        modalType: action.modalType,
        modalProps: action.modalProps
      }
    case 'HIDE_MODAL':
      return initialState
    default:
      return state
  }
}

Action that shows modal:

export const showAchievement = (modalProps) => ({ type: types.SHOW_ACHIEVEMENT, ...modalProps })

How can I send a function to my modal component that will dispatch an action 'HIDE_MODAL' :

  openAchievementModal(){
        this.props.showAchievement({
           type: 'SHOW_MODAL',
          modalType: 'ADD_ACHIEVEMENT',
          modalProps: {
          dayId: this.props.day.id,
          onChange: this.props.addAchievement
        }
    })
  }

I am using react-modal as wrapper for my modals which are mounted at the top of components:

import React, { Component } from 'react';
import Modal from 'react-modal';
import ModalWrapper from './ModalWrapper.js';

import Select from 'react-select';

export default class AddAchievementModal extends Component {

   constructor() {
       super();
         this.logChange = this.logChange.bind(this);
  }

  logChange(e) {

        this.props.onChange(this.props.dayId, e.label)
        this.props.onClose()
  }

  render() {

    console.log(this.props)
    var options = [
      { value: 1, label: 'Play Music' },
      { value: 2, label: 'Football' }
    ];

    return (
         <span >
          <ModalWrapper
            onRequestClose={this.props.closeModal}
            style={this.props.customStyles}
            contentLabel="Modal" >

          <h2>Add Achievement</h2>

          <Select
            name="form-field-name"
            value="one"
            options={options}
            onChange={this.logChange}
          />
          </ModalWrapper>
      </span>
    )

    }
}

React modal wrapper:

import Modal from 'react-modal'
import React, { Component } from 'react'

const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : '50%',
    bottom                : '30%',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)',
    borderRadius          : '10px',
    border                : '3px solid #ccc'
  },
};

class ModalWrapper extends Component {
  constructor() {
    super();

    this.state = {
      modalIsOpen: true
    };

    this.closeModal = this.closeModal.bind(this);
  }

  closeModal() {
    this.setState({modalIsOpen: false});
  }


   render() {
    return (
          <Modal style={customStyles}  isOpen={this.state.modalIsOpen} contentLabel="Model Wrapper" closeModal={this.props.closeModal}>
                <header>
                <button onClick={this.closeModal}>Close</button>
                 </header>

                {this.props.children}

           </Modal>
          );
  }
}

export default ModalWrapper

To close the modal, do I need to modelIsOpen to false, aswell as dispatching an action HIDE_MODAL ?