implementation of modal using react, redux and bootstrap styles.

actions.js

import * as actions from './constants';

export function toggleModal(){
  return {
    type: actions.TOGGLE_MODAL
  };
}

buttonModalComponent.jsx

import React,{Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {toggleModal} from './actions';

class ModalComponentButton extends Component{
    render(){
      const {toggleModal} = this.props;
      return (<button onClick={toggleModal}>Click Me !!</button>);
    }
}

function mapDispatchToProps(dispatch){
  return bindActionCreators({
    toggleModal
  }, dispatch);
}

export default connect(null, mapDispatchToProps)(ModalComponentButton);

constants.js

export const TOGGLE_MODAL = "TOGGLE_MODAL";

modalComponent.jsx

import React,{Component} from 'react';
import {connect} from 'react-redux';
import ButtonComponent from './buttonModalComponent';
import Modal from 'react-modal';
import {toggleModal} from './actions';
import {bindActionCreators} from 'redux';

class ModalComponentDialog extends Component{
  constructor(props){
    super(props);
    this.closeModal = this.closeModal.bind(this);
  }

  closeModal(){
    this.props.toggleModal();
  }

  render(){
    const {modalStatus} = this.props;
    const status = modalStatus ? "Verdadero": "Falso";
    return (
      <div>
        <ButtonComponent/>
          <Modal
            isOpen={modalStatus}
            onRequestClose={this.closeModal}
            className="modal-dialog"
            >
            <div className="modal-content">
              <div className="modal-header">
                <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <h4 className="modal-title">Modal title</h4>
              </div>
              <div className="modal-body">
                <p>One fine body&hellip;</p>
              </div>
              <div className="modal-footer">
                <button type="button" className="btn btn-secondary" data-dismiss="modal" onClick={this.closeModal}>Close</button>
                <button type="button" className="btn btn-primary" onClick={this.closeModal}>Save changes</button>
              </div>
            </div>
          </Modal>
      </div>
    );
  }
}

function mapStateToProps({modal}){
  return {
    modalStatus: modal.get('modalState')
  };
}

function mapDispatchToProps(dispatch){
  return bindActionCreators({
    toggleModal
  }, dispatch);
}

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

reducers.js

import * as actions from './constants';
import Immutable from 'immutable';

const initialState = Immutable.Map({
  modalState: false
});

export default function(state = initialState, action){
  switch(action.type){
    case actions.TOGGLE_MODAL:
      const actualState = state.get('modalState');
      const newState = actualState === false ? true : false;
      return state.set('modalState', newState);
    default:
      return state;
  }
}