Redux异步示例在Firefox浏览器中无法运行问题求助

我来帮你梳理下这个问题的可能原因和解决方向，结合你的描述和代码片段，咱们一步步来排查：

1. 检查Firefox的隐私与跨域设置 #

Firefox的默认隐私保护策略可能比Chrome/Safari更严格，尤其是对跨域请求和本地文件的处理：

• 先试试关闭增强跟踪保护：打开Firefox设置 → 隐私与安全 → 找到“增强跟踪保护”，暂时切换为“标准”或者直接关闭，然后重新运行你的应用
• 确认本地部署的访问方式：如果你是直接打开本地HTML文件（file://协议），Firefox对这种方式的跨域限制非常严格，一定要用本地服务器（比如http-server、create-react-app自带的dev server）以http://localhost开头的地址访问

2. 完善fetch的错误处理逻辑 #

你的当前代码没有完整处理fetch的错误场景，fetch只有在完全无法建立网络连接时才会触发reject，HTTP错误状态码（比如403、500）不会自动进入catch块，这会导致你无法准确判断错误原因。建议修改代码如下：

const fetchPosts = subreddit => dispatch => {
  dispatch(requestPosts(subreddit))
  return fetch(`https://www.reddit.com/r/${subreddit}.json`)
    .then(response => {
      // 先检查响应是否正常
      if (!response.ok) {
        throw new Error(`请求失败，状态码：${response.status}`);
      }
      return fetchReturn(response);
    })
    .then(json => dispatch(receivePosts(subreddit, json)))
    .catch(error => {
      // 打印详细错误信息，方便排查
      console.error('Fetch请求出错：', error);
      // 这里可以添加dispatch错误action的逻辑，更新UI提示用户
      // dispatch(fetchPostsFailed(subreddit, error.message))
    });
}

修改后重新运行，查看控制台的错误详情，这能帮你区分是网络问题、HTTP响应问题还是代码逻辑问题。

3. 确认redux-thunk中间件的配置正确性 #

你提到错误看起来发生在加载中间件时，那要仔细检查store的创建代码是否正确应用了redux-thunk：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

// 确保中间件正确注入
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

另外，如果你使用了Redux DevTools，也可能在Firefox下存在兼容性问题，可以暂时去掉DevTools的配置，只保留redux-thunk中间件试试。同时确认redux和redux-thunk的版本是否兼容，比如redux-thunk v2.x需要redux v3.x或更高版本。

4. 直接验证Reddit API的可访问性 #

在Firefox的地址栏直接访问https://www.reddit.com/r/reactjs.json，看看能否正常返回JSON数据：

• 如果无法访问，那问题可能出在Firefox的网络设置（比如代理、DNS）或者你的网络环境对Reddit的访问限制，需要先解决网络连通性问题
• 如果能正常访问，那问题就集中在你的代码或中间件处理逻辑上，可以结合第二步的错误日志进一步排查

内容的提问来源于stack exchange，提问作者Terany