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

April 20, 2016

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

今回のやりかた

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

index.js

class SwiftLang {
let ff: String
}

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(


  ,
  rootEl
);

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

actions/index.js

export const changeScreenWidth = (width) => {
  return {
    type: 'CHANGE\_SCREEN\_WIDTH',
    screenWidth: width,
  };
};

_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;

ご教授を＞＜

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