Question

我正在努力做到＃34;开始使用redux＆＃34;当然关于egghead.io

但是，我不想像他那样在jsbin上使用示例代码。

我想在我自己的快递服务器上使用它。因为，＆＃34;开始＆＃34;的重点是什么？教程，如果我们在现实生活中根本不能使用它？

这里是课程中使用的代码： http://jsbin.com/wuwezo/74/edit?js,console,output

从这开始：

const { connect, Provider } = ReactRedux;
const { combineReducers, createStore } = Redux;

所以我试图让这两行工作。

在我的index.jsx文件中，在这两行之上，我导入react-redux和redux，所以：

import ReactRedux from 'react-redux';
import Redux from 'redux';
const { connect, Provider } = ReactRedux;
const { combineReducers, createStore } = Redux;

然后我运行webpack（我使用babel loader）：它将bundle.js文件放在公共目录中（其中index.html是）。然后我运行快速服务器，并访问index.html。

我在控制台中得到了这个：火狐：＆＃34; TypeError：_reactRedux2.default未定义[了解详情]＆＃34;

铬：＆＃34; Uncaught TypeError：无法读取属性＆＃39; connect＆＃39;未定义＆＃34;

用Google搜索firefox错误，我什么都没得到。

但是对于Chrome，我知道我使用＆＃34; const {...}＆＃34;来定义未定义。

这是一个babel装载机问题吗？

我错过了什么？

Answer 1

当这些模块不是es6模块时，您尝试使用es6导入。回到使用require。

const { connect, Provider } = require('react-redux');
const { combineReducers, createStore } = require('redux');

以下选项也适用于您：

import * as ReactRedux from 'react-redux';
import * as Redux from 'redux';
const { connect, Provider } = ReactRedux;
const { combineReducers, createStore } = Redux;

和

import { connect, Provider } from 'react-redux';
import { combineReducers, createStore }  from 'redux';

Answer 2

要使用es6，您可以在webpack中使用"presets": ["es2016"]。有关文档，您可以参考here

react-redux：无法导入类

2 个答案: