ExternalLink.tsx

import * as PropTypes  from 'prop-types';
import * as React from 'react';
import { connect, Dispatch } from 'react-redux'
import { ActionCreator } from 'typescript-fsa';

import { openExternal } from './reducer'

interface ExternalLinkPropTypes {
  href: string,
  target?: string,
  onClick?: React.MouseEventHandler<HTMLAnchorElement>,
  innerRef?: React.Ref<any>,
}

interface ExternalLinkAction {
  openExternal: ActionCreator<string>
}

type ExternalLinkProps = ExternalLinkPropTypes & { dispatch: Dispatch<ExternalLinkAction> };

export class ExternalLink extends React.Component<ExternalLinkProps> {
  public static propTypes = {
    href: PropTypes.string.isRequired,
    innerRef: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
    onClick: PropTypes.func,
    target: PropTypes.string,
  }

  public render() {
    const { innerRef, dispatch, ...props } = this.props;
    return (
      <a {...props} onClick={this.handleClick.bind(this)} ref={innerRef} />
    );
  }

  private handleClick(e: React.MouseEvent<HTMLAnchorElement>) {
    if (this.props.onClick) {
      this.props.onClick(e);
    }

    e.preventDefault();
    this.props.dispatch(openExternal(this.props.href));
  }
}

export default connect()(ExternalLink);

ExternalLink_reducer.ts

import actionCreatorFactory from 'typescript-fsa';

const actionCreator = actionCreatorFactory();

export const openExternal = actionCreator<string>('@@electron/OPEN_EXTERNAL');

ExternalLink_saga.ts

import { SagaIterator } from 'redux-saga';
import { fork } from 'redux-saga/effects';

import { createWatchIpcSender } from '../../saga'
import { openExternal } from './reducer'

export default function*(): SagaIterator {
  yield fork(createWatchIpcSender(openExternal))
}