TypeError：无法读取React Chrome Extension上未定义的属性“错误”

Question

我正在使用React-Chrome-Redux库开发React Chrome扩展程序

这是我第一次使用这个，我陷入了一个错误，我无法弄清楚原因。

我的弹出应用程序在运行时失败，并在控制台上显示以下错误消息：

（未知）事件处理程序出错：TypeError：无法读取未定义的属性“错误”

我尝试调试并在错误的确切位置设置断点：

return new Promise(function (resolve, reject) {
    chrome.runtime.sendMessage({
      type: _constants.DISPATCH_TYPE,
      payload: data
    }, function (_ref2) {
      var error = _ref2.error;
      var value = _ref2.value;

      if (error) {
        reject((0, _assignIn2.default)(new Error(), error));
      } else {
        resolve(value.payload);
      }
    });
  });
}

在Promise回调时，当动作为：type：“chromex.dispatch”时，_ref2未​​定义，并且有效负载也未定义。

这是在引入调度方法启动认证过程后开始发生的，代码如下：

class App extends Component {

  constructor(props) {
    super(props);

    this.props.dispatch({
      type: START_AUTH
    });
  }

在popup / index.js和background / index.js上我设置了商店通信渠道：

//popup
import {Store} from 'react-chrome-redux';
import {Provider} from 'react-redux';


const proxyStore = new Store({
  portName: 'my_app'
});

//background
import rootReducer from '../core/reducers';

import {wrapStore} from 'react-chrome-redux';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import {Store} from 'react-chrome-redux';

import App from './components/App';

const store = createStore(rootReducer, {});

wrapStore(store, {
  portName: 'my_app'
});

我在身份验证过程中有很多日志消息，但似乎没有任何事情发生。

在核心/我有常见的文件，如reducer，动作类型，动作等，它总是从web6-babel的ES6翻译。

不幸的是，似乎React dev工具无法在Chrome扩展程序上运行以帮助调试。

您需要的任何想法或更多信息，以帮助我弄清楚发生了什么以及如何解决它？

Answer 1

这适用于任何偶然发现在这里寻找答案的人。 @danielfranca发布的只是症状。

实际发生的是，在调度操作后抛出错误（在后台页面中），因此操作无法完成。 请参阅wrapStore.js或更低版本（如果他们的github发生了变化）。

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === DISPATCH_TYPE) {
    const action = Object.assign({}, request.payload, {
      _sender: sender
    });

    dispatchResponder(store.dispatch(action), sendResponse);
    return true;
  }
});

下面这一行， store.dispatch(action)返回一个结果。 但是如果在此期间发生错误（在reducer中），那么就不会得到结果。

dispatchResponder(store.dispatch(action), sendResponse);

所以它什么都没发回（未定义）（ 参见这里 ）。 在Store.js中 ， dispatch函数尝试从undefined检索error键，从而导致错误。

因为您正在检查弹出/内容页面，所以会收到这个非常模糊的错误消息。 如果您检查背景页面，您将看到实际错误。

我创建了一个PR来显示更有用的错误消息。 希望它会合并。

Answer 2

解决方案比我预期的要简单得多。

动作名称未被导出，因此调度的类型实际上是undefined

改变自：

const START_AUTH = "START_AUTH";

至：

export const START_AUTH = "START_AUTH";

解决了这个问题。