Redux根据窗口宽度改变状态

import { createStore } from 'redux';

// 定义初始状态
const initialState = {
  windowWidth: window.innerWidth, // 初始窗口宽度
};

// 定义Reducer函数
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'CHANGE_WINDOW_WIDTH':
      return {
        ...state,
        windowWidth: action.payload,
      };
    default:
      return state;
  }
};

// 创建store
const store = createStore(reducer);

import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';

const App = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    const handleResize = () => {
      dispatch({
        type: 'CHANGE_WINDOW_WIDTH',
        payload: window.innerWidth,
      });
    };

    window.addEventListener('resize', handleResize);

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

  return (
    // 应用程序的其他组件和UI
  );
};

export default App;