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

Question

我有一个带有前端的web应用程序，用react和redux编写，这是我的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'));

目前，此Web应用程序可以在Chrome上运行，但不适用于Safari。

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

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

window.__REDUX_DEVTOOLS_EXTENSION__ && compose

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

window.__REDUX_DEVTOOLS_EXTENSION__ || compose

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

Answer 1

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

现在我决定最后google一点，这就是我发现的：https://medium.com/@zalmoxis/improve-your-development-workflow-with-redux-devtools-extension-f0379227ff83

而不是window.devToolsExtension（计划不推荐使用window.REDUX_DEVTOOLS_EXTENSION），现在我们将使用window.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)

现在它的工作原理。