好问题。我喜欢在我的商店中有一个 ui 部分。其减速器可能如下所示：

const initialState = {
    screenWidth: typeof window === 'object' ? window.innerWidth : null
};

function uiReducer(state = initialState, action) {
    switch (action.type) {
        case SCREEN_RESIZE:
            return Object.assign({}, state, {
                screenWidth: action.screenWidth
            });
    }
    return state;
}

其动作非常样板。（SCREEN_RESIZE作为一个常量字符串。）

function screenResize(width) {
    return {
        type: SCREEN_RESIZE,
        screenWidth: width
    };
}

最后，您将它与事件侦听器连接在一起。我会将以下代码放在您初始化store变量的地方。

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

媒体查询

如果您的应用对屏幕尺寸（例如大/小）采用更二进制的视图，您可能更喜欢使用媒体查询。例如

const mediaQuery = window.matchMedia('(min-width: 650px)');

if (mediaQuery.matches) {
    store.dispatch(setLargeScreen());
} else {
    store.dispatch(setSmallScreen());
}

mediaQuery.addListener((mq) => {
    if (mq.matches) {
        store.dispatch(setLargeScreen());
    } else {
        store.dispatch(setSmallScreen());
    }
});

（这次我将省略 action 和 reducer 代码。它们的样子很明显。）

这种方法的一个缺点是可能会使用错误的值初始化商店，并且我们依赖媒体查询在商店初始化后设置正确的值。除了将媒体查询推入减速器文件本身之外，我不知道解决此问题的最佳方法。欢迎反馈。

更新

现在我考虑了一下，您可能可以通过执行以下操作来解决此问题。（但请注意，我尚未对此进行测试。）

const mediaQuery = window.matchMedia('(min-width: 650px)');

const store = createStore(reducer, {
    ui: {
        largeScreen: mediaQuery.matches
    }
});

mediaQuery.addListener((mq) => {
    if (mq.matches) {
        store.dispatch(setLargeScreen());
    } else {
        store.dispatch(setSmallScreen());
    }
});

更新二：最后一种方法的缺点是ui对象将替换整个ui状态而不仅仅是largeScreen字段。初始ui状态的任何其他内容都会丢失。

使用redux-responsive来处理应用程序的响应状态。它使用商店增强器通过自己的减速器管理商店状态（通常称为“浏览器”）的专用区域（属性），因此您不必向文档对象隐式添加事件侦听器。

您需要做的就是将 browser.width、browser.height 等映射到组件的 props 上。请注意，只有redux-responsive 中定义的 reducer负责更新这些值。

我有一个类似的情况，我需要窗口大小用于响应以外的目的。根据这个，你也可以使用终极版-的thunk：

function listenToWindowEvent(name, mapEventToAction, filter = (e) => true) {
  return function (dispatch) {
    function handleEvent(e) {
      if (filter(e)) {
        dispatch(mapEventToAction(e));
      }
    }

    window.addEventListener(name, handleEvent);

    // note: returns a function to unsubscribe
    return () => window.removeEventListener(name, handleEvent);
  };
}

// turns DOM event into action,
// you can define many of those
function globalKeyPress(e) {
  return {
    type: 'GLOBAL_KEY_PRESS',
    key: e.key
  };
}

// subscribe to event
let unlistenKeyPress = store.dispatch(listenToWindowEvent('keypress', globalKeyPress));
// eventually unsubscribe
unlistenKeyPress();

尽管实际上，如果您的用例很简单，您甚至不需要使用 thunk 函数。只需创建一个侦听器函数，该函数将 Redux 调度作为参数并使用它来调度所需的操作。有关示例，请参阅参考资料。但目前接受的答案几乎涵盖了这种情况