Redux 开发工具选项在 Safari 上不起作用答案

【问题标题】：Redux dev tool option does not work on SafariRedux 开发工具选项在 Safari 上不起作用
【发布时间】：2018-03-14 09:59:15
【问题描述】：

我有一个前端是用 react 和 redux 编写的 web 应用程序，这是我的 index.jsx 文件

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { createStore, applyMiddleware, compose } from 'redux';

import App from './app/App';
import Home from './app/Home';
import ContactMe from './app/ContactMe';
import ErrorPage from './app/ErrorPage';
import Post from './app/Post';
import makeRootReducer from './reducers/index';
require('./assets/stylesheets/bootstrap.scss');
require('./assets/stylesheets/styles.scss');

let store = null;
const middleware = applyMiddleware(thunk);

const enhancer = compose(
  middleware,
  window.__REDUX_DEVTOOLS_EXTENSION__ && compose
);

store = createStore(
  makeRootReducer(),
  {},
  enhancer
);

ReactDOM.render(
<Provider store={store}>
  <Router history={browserHistory}>
    <Route path="/" component={App} >
      <IndexRoute component={Home} />
      <Route path="contact-me" component={ContactMe} />
      <Route path="post/:id" component={Post} />
      <Route path="*" component={ErrorPage} />
    </Route>
  </Router>
</Provider>, document.getElementById('root'));

目前这个网络应用可以在 chrome 上运行，但不能在 Safari 上运行。

TypeError: undefined is not an object (evaluating 'b.apply')

这是我从 safari 得到的错误。我发现如果我删除如下一行代码

window.__REDUX_DEVTOOLS_EXTENSION__ && compose

它在 chrome 和 safari 上都能正常工作，但我不能使用 redux 开发工具。如果我将 && 更改为 || （如下所示，它适用于 safari 但不适用于 chrome

window.__REDUX_DEVTOOLS_EXTENSION__ || compose

任何人都可以弄清楚我的代码有什么问题。因为我需要使用开发工具来跟踪 web 应用程序的状态并在 chrome 和 safari 上运行它

【问题讨论】：

不是你想要的，但this 可能会有所帮助。

标签： reactjs redux react-redux redux-thunk react-router-redux

【解决方案1】：

我在很长一段时间内都遇到了同样的问题，但我忽略了它。最烦人的部分是你必须从生产包中删除 window.REDUX_DEVTOOLS_EXTENSION，否则 safari 上的用户将有一个崩溃的应用程序......

现在我终于决定用谷歌搜索一下，结果如下：https://medium.com/@zalmoxis/improve-your-development-workflow-with-redux-devtools-extension-f0379227ff83

而不是 window.devToolsExtension（原计划是已弃用，取而代之的是 window.REDUX_DEVTOOLS_EXTENSION），现在我们将使用窗口。REDUX_DEVTOOLS_EXTENSION_COMPOSE：

所以我改变了我的代码：

  const createStoreWithFirebase = compose(
    reactReduxFirebase(fire, rrfConfig), // firebase instance as first argument
    reduxFirestore(fire),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )(createStore)

到：

  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

  const createStoreWithFirebase = composeEnhancers(
    reactReduxFirebase(fire, rrfConfig), // firebase instance as first argument
    reduxFirestore(fire)
  )(createStore)

现在它可以工作了。

【讨论】：