Redux、プロバイダ、デコレータ

Question

私はreduxで新しく、私はそれで私のアプリケーションを構築しようとしています。 私のサーバーを起動すると、予期しないトークンここで、 @connect（）が呼び出されます。

私のコードを見てみましょう：

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ツールを使用することです。これは、あなたのために構築されたビルドツール、あなた自身で管理しなければならない設定、そして始めるのを手助けするすばらしい開発者エクスペリエンス機能を備えた作業環境を作成します。