Redux, Provider und Decorators

Question

Ich bin neu mit Redux, und ich versuche, meine App damit zu bauen. Ich erstellte Reduzierer Datei, die Mähdrescher Reduzierer Datei, die Komponenten, die Aktionen usw. Aber wenn ich meinen Server starte ich bekomme Unerwartete Token wo @connect() heißt.

Lassen Sie meinen Code sehen:

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 }), 
    ], 
}; 

Und ich bin nach dieser Tutorial

Answer 1

Das legt nahe, dass der Dekorateur-Transformation nicht richtig eingerichtet. Ich sehe, dass Sie transform-decorators-legacy drin haben, aber ich würde vermuten, dass etwas über die Bestellung nicht korrekt ist.

Das Redux-Team rät im Allgemeinen nicht mit Dekoratoren, da sie immer noch ein instabiles Angebot sind, und sowohl die Spezifikation und die Compiler-Plugins wurden geändert. Verwenden Sie stattdessen connect als Funktion: export default connect(mapState, mapDispatch)(MyComponent).

Der einfachste Weg, um mit einer Build-Umgebung für React-Anwendungen zu starten, ist die Verwendung des Tools Create-React-App. Es erstellt eine funktionierende Projektumgebung mit Build-Tools, die für Sie eingerichtet wurden, keine Konfiguration, die Sie selbst verwalten müssen, und eine Reihe von netten Entwicklerfunktionen, die Ihnen den Einstieg erleichtern.