Redux 不更新 IE11 中的属性答案

【问题标题】：Redux not updating properties in IE11Redux 不更新 IE11 中的属性
【发布时间】：2016-03-10 10:24:06
【问题描述】：

我在 Internet Explorer 11 中遇到了一个关于 React 和 Redux 的奇怪问题。

我用 redux 和 thunk+promise 中间件创建了一个 React 应用程序。所述应用程序在 Chrome、safari 和 firefox 中运行良好，但在 Internet Explorer 中运行时，React/Redux 没有更新 11 个道具。

在检查网络选项卡时，我可以看到 Http 请求被触发得很好。在 Redux reducer 中记录这个结果也给出了预期的结果。但似乎返回新状态不会更新道具。或者完全触发任何组件的重新渲染。（仅在 IE 中）。

我尝试谷歌查看是否有人在同一条船上，但我找不到任何符合我的问题的东西。

TLDR； Redux 在返回状态后不更新 props 并触发组件的重新渲染/更新。（仅在 IE11 中）。

减速机：

const customers = (state = {customers: []}, action) => {
    switch (action.type) {
        case GET + _FULFILLED:
            return Object.assign({}, state, {
                customers: action.payload
            });
            break;
    }
}

action.payload 具有正确的值；返回似乎没有更新道具。

控制台也没有错误

已解决我必须添加一个 object.assign polyfill；不知道使用 babel 后需要这样做

【问题讨论】：

我遇到过这个问题。原来我需要对我的 ajax 请求应用缓存清除。

标签： javascript reactjs redux

【解决方案1】：

这个问题是因为 IE11 对 ES6 的支持很差。我发现您需要同时填充 Promises 和 Object.assign。

至于 Babel，可能是因为 Babel 只将非标准代码转换为标准代码。大多数浏览器已经默认实现了Promises/Object.assign，所以我猜最新的 Babel 版本不再需要将其转换为 ES5 代码了

【讨论】：

我发现我还需要一个用于 Symbol 的 polyfill。在我的代码的入口点导入babel-polyfill 是关键。
babel-polyfill 为我修复了上述所有 IE11 问题，但仍然没有触发重新渲染。

【解决方案2】：

有一个类似的问题，但解决方案与 Polyfill (babel-polyfill) 无关，因为我已经将它们导入，而是与我的 axios 实例配置有关。我找到了我的问题here 的答案。基本上我所要做的就是通过在我的 axios 实例配置中添加以下标头来禁用缓存：

const instance = axios.create({
  headers: {
    Pragma: "no-cache"
  }
});

显然其他浏览器（firefox、chrome 等）不会通过请求缓存那么多，但在 IE 的情况下，必须明确设置这些标头。

【讨论】：

【解决方案3】：

IE 11 不支持 Promise，您需要使用 polyfill，例如 --> https://github.com/stefanpenner/es6-promise

【讨论】：

这不是问题；正如我所说，http请求被触发就好了。我已经为此使用了 polyfill :)