Redux、提供者和装饰器

Question

我是 redux 的新手，我正在尝试用它构建我的应用程序。我创建了 reducers 文件、combine reducers 文件、组件、动作等但是当我启动服务器时，我得到 Unexpected token where @connect() is called.

让我们看看我的代码：

Main.js

 ...
 import { Provider } from "react-redux";
 ...
 ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>{routes}</Router>
    </Provider>, 
    document.getElementById('app')
 );

Login.js

...
@connect((store) => {
  return {
    modal: store.showModal,
  };
})

class ModalLogin extends React.Component {
 ...
}

webpack.config.js

module.exports = {
   context: path.join(__dirname, "app"),
   devtool: debug ? "inline-sourcemap" : null,
   entry: "./main.js",
   module: {
     loaders: [
       {
         test: /\.jsx?$/,
         exclude: /(node_modules|bower_components)/,
         loader: 'babel-loader',
         query: {
           presets: ['react', 'es2015', 'stage-0'],
           plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
        }
      }
    ]
   },
   output: {
     path: __dirname + "/public/js/",
     filename: "bundle.js"
   },
   plugins: debug ? [] : [
     new webpack.optimize.DedupePlugin(),
     new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false  }),
  ],
};

我正在关注这个 Tutorial

Answer 1

这表明装饰器转换设置不正确。我确实看到你在那里有 transform-decorators-legacy，但我猜有些地方的顺序不正确。

Redux 团队通常建议不要使用装饰器，因为它们仍然是一个不稳定的提议，规范和编译器插件都在不断变化。将 connect 用作函数：export default connect(mapState, mapDispatch)(MyComponent).

此外，启动运行 React 应用程序构建环境的最简单方法是使用 Create-React-App 工具。它创建了一个工作项目环境，其中包含为您设置的构建工具，没有您必须自己管理的配置，以及一系列不错的开发人员体验功能来帮助您入门。

Redux、提供者和装饰器

Redux, Provider and decorators

decorator

reactjs

redux

react-redux