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

Posted 2023-03-08

【中文标题】Redux 开发工具选项在 Safari 上不起作用

【英文标题】：Redux dev tool option does not work on 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 可能会有所帮助。

【参考方案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)

现在它可以工作了。