ReactでWindowのリサイズイベントを取得するのに react-event-listenerつかった

Redux + ReactなサイトでウィンドウサイズもReduxで管理させたかった。
Cantainer内で設定することもできるが、ルートコンポーネントが管理することになりそうなので、何か便利なものはないか探したたらreact-event-listenerがあった。

<EventListener target="window" onResize={onResize} />

みたいな感じでつかえるので、以下のようなContainerを用意してつかっています。

containers/resize_event_listener.js

import { connect } from 'react-redux'
import EventListener from 'react-event-listener';

const resize = (value) => { type: 'RESIZE', value };

const mapStateToProps = (state, ownProps) => {
    return {
        target: window
    };
};

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        onResize: () => {
            return dispatch(resize(window.innerWidth, window.innerHeight));
        }
    }
};

const ResizeEventListener = connect(mapStateToProps, mapDispatchToProps)(EventListener);

export default ResizeEventListener

みたいなのを用意して以下のようにつかってます。

<ResizeEventListener />

もうちょっと詳しく

reactつかうときはなるべくconstだけで戦いたいといろいろやってるうちにこういうやり方におちつきました。
あと関数スタイルのコンポーネント作成にこだわりたいというのもあります。

このReactEventListenerを使わない場合は以下のように書いて近いことはできます。

const mapDispatchToProps = (dispatch, ownProps) => {
    window.addEventListener('resize', () => {
       dispatch(resize(window.innerWidth, window.innerHeight)
    }
    return {}
};

componentDidMountの代わりのようにつかえますが、componentWillUnmountの代わりにつかう方法がないので、removeEventListenerする良い方法が浮かびません。
他にはhttps://github.com/acdlite/recomposeを使うと関数スタイルを貫き通すことができると思います。