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

React+Reduxをした時のwindowサイズの変更検知最近、Reactの学習を始めてみました(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(
  
    
  ,
  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;

ご教授を><

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

Pocket
LINEで送る

You may also like...