dispatch action to close modal - reactjs

Question

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 ?

Answer 1

The actions should be plain objects; you are mixing them with functions.
What you should instead do is to only pass the callback functions which dispatch actions to the modal component.
You would do this in the smart component. See smart-and-dumb-components article.
onOpenAchievementModal() {
this.props.showAchievement({
...
})
}
onAddAchievementModal(achievement) {
this.props.addAchievement({
...
achievement,
})
}
and then render the modal, something like:
<Modal onOpen={this.onOpenAchievementModal} onClickAchievement={this.onAddAchievementModal}/>