Popups Managed Via Redux:

Popup.js

import React from 'react'
import reactCSS from 'reactcss'
import { connect } from 'react-redux'
import { actions, selectors } from './reducer'

export const Popup = ({ children, visible, onClose, name }) => {
  const styles = reactCSS({
    'default': {
      wrap: {
        position: 'absolute',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
      },
      cover: {
        position: 'absolute',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        background: 'rgba(39, 36, 41, 0.7)',
      },
      box: {
        position: 'absolute',
        left: '50%',
        top: '50%',
        transform: 'translate(-50%, -50%)',
      },
    },
  })

  const handleClose = () => onClose(name)

  return visible ? (
    <div style={ styles.wrap }>
      <div style={ styles.cover } onClick={ handleClose } />
      <div style={ styles.box }>{ children }</div>
    </div>
  ) : null
}

export default connect(
  (state, ownProps) => ({
    visible: selectors.getPopupVisibility(state, ownProps.name),
  }),
  actions
)(Popup)

reducer.js

export const OPEN_POPUP = 'POPUP/OPEN_POPUP'
export const CLOSE_POPUP = 'POPUP/CLOSE_POPUP'

export const reducer = (state = {}, action) => {
  switch (action.type) {
    case OPEN_POPUP:
      return { ...state, [action.name]: true }
    case CLOSE_POPUP:
      return { ...state, [action.name]: false }
    default: return state
  }
}

export const actions = {
  onClose: name => ({ type: CLOSE_POPUP, name }),
  onOpen: name => ({ type: OPEN_POPUP, name }),
}

export const selectors = {
  getPopupVisibility: (state, name) => state[name] || false,
}