How to store screen size info on window resize with React and Redux?

Sometimes, we want to store screen size info on window resize with React and Redux.

In this article, we’ll look at how to store screen size info on window resize with React and Redux.

How to store screen size info on window resize with React and Redux?

To store screen size info on window resize with React and Redux, we can listen for the window resize event with addEventListener.

Then we store the screen size in the store.

For instance, we write:

import React, { useEffect } from "react";
import { Provider, useDispatch, useSelector } from "react-redux";
import { combineReducers, createStore } from "redux";

const ScreenReducer = (state = {}, action) => {
  switch (action.type) {
    case "SCREEN_RESIZE":
      const { screenWidth } = action;
      return { ...state, screenWidth };
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  screen: ScreenReducer
});

const store = createStore(rootReducer);

const ScreenSize = () => {
  const { screenWidth } = useSelector((s) => s.screen);
  const dispatch = useDispatch();

  useEffect(() => {
    const onResize = () => {
      dispatch({ type: "SCREEN_RESIZE", screenWidth: window.innerWidth });
    };

    window.addEventListener("resize", onResize);

    return () => {
      window.removeEventListener("resize", onResize);
    };
  }, [dispatch]);

  return (
    <div>
      <span>{screenWidth}</span>
    </div>
  );
};

export default function App() {
  return (
    <Provider store={store}>
      <ScreenSize />
    </Provider>
  );
}

We have the ScreenReducer reducer function that returns the state + 1 if the 'ADD' action type is dispatched.

We get the screenWidth from the action and we return it in the state.

Then we call combineReducers with an object with the count as the state property name and the ScreenReducer as its reducer.

Next, we call createStore with rootReducer to create the store from the root reducer.

Then we create the ScreenSize component that calls the useSelector hook to return the the value of the count state.

And we call the useDispatch hook to return the dispatch function that we can use to dispatch actions.

We watch for screen size changes by using the useEffect hook with a callback that calls window.addEventListener with the onResize function.

In onResize, we call dispatch with an object that has the type and the screenWidth properties.

window.innerWidth gets the screen’s width.

Also, we return a function that calls window.removeEventListener to remove the resize listener when we unmount the component.

Finally, in App, we wrap Provider around Counter so useSelector and useDispatch can be used in ScreenSize.

And we set the store prop to the store so we can dispatch actions and get states from the store.

Conclusion

To store screen size info on window resize with React and Redux, we can listen for the window resize event with addEventListener.

Then we store the screen size in the store.