React+Reduxをした時のwindowサイズの変更検知

最近、Reduxの学習を始めてみました(1,2)。一つ簡単なアプリを作ってみようとしてトライしたのですが、そこで、windowサイズの変更を検知したいと思いました。が、まだこの近辺の検索力が足りず、自作しました。Reduxの関連ツールとしてはReactReduxを使っています。

今回のやりかた

rootとなるJavascriptファイルに下記のようにaddEventListnerを追加してみました。

index.js

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import sampleApp from './reducers/SampleApp';
import App from './components/App';
import { changeScreenWidth } from './actions';

let store = createStore(sampleApp);

const rootEl = document.getElementById('root');

render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootEl
);

window.addEventListener('resize', () => {
  store.dispatch(changeScreenWidth(window.innerWidth));
});

変更をするactionを追加して、

actions/index.js

export const changeScreenWidth = (width) => {
  return {
    type: 'CHANGE_SCREEN_WIDTH',
    screenWidth: width,
  };
};

reducerでstateに反映します。ここでwindow.innerWidthをしてもよかったのかもしれませんが、呼び出しもとで追加するようにしました。

reducers/SampleApp.js

const initialState = {
  ...
  screenWidth: window.innerWidth,
};

const sampleApp = (state = initialState, action) => {
  switch (action.type) {
    ...
    case 'CHANGE_SCREEN_WIDTH':
      return Object.assign({}, state, {
        screenWidth: action.screenWidth,
      });
    default:
      return state;
  }
};

export default sampleApp;

ご教授を＞＜

このやり方で動作としては問題ないのですが、考え方がおかしいとか、もっと簡単にやる方法があるとかあれば教えてください＞＜