2016-08-30 2 views
0

Beim Versuch, react-rails zu verwenden, habe ich Probleme mit der Integration von mobx als Statusverwaltung in meine App bekommen.Wie benutzt man Mobx mit Reaktionsschienen?

Ich hatte den Eindruck, dass die Rails-Asset-Pipeline mobx zur Reaktion bringen würde, aber dies war nicht erfolgreich. Ich verwende die react-rails gem und versuche, mobx in meine react.es6.jsx Blätter im Komponentenordner einzubauen.

meine package.json Datei:

{ 
    "name": "rent-pseudo", 
    "version": "1.0.0", 
    "description": "== Zipqode", 
    "main": "index.js", 
    "dependencies": { 
    "babel-plugin-syntax-async-functions": "^6.3.13", 
    "babel-plugin-transform-regenerator": "^6.3.18", 
    "babel-polyfill": "^6.3.14", 
    "babel-preset-es2015": "^6.3.13", 
    "babel-preset-react": "^6.3.13", 
    "babel-preset-stage-0": "^6.3.13", 
    "babelify": "^7.2.0", 
    "bourbon": "^4.2.7", 
    "bourbon-neat": "^1.8.0", 
    "browserify": "^13.1.0", 
    "browserify-incremental": "^3.1.1", 
    "font-awesome": "^4.6.3", 
    "graphql": "^0.6.2", 
    "mobx": "2.4.1", 
    "mobx-react": "^3.5.3", 
    "mobx-react-devtools": "^4.2.5", 
    "react": "^15.3.1", 
    "react-dom": "^15.3.1", 
    "react-google-maps": "^4.11.0", 
    "react-router": "2.6.1", 
    "es6-promise": "^3.0.2", 
    "fetch": "^0.3.6", 
    "jquery": "^2.1.4", 
    "jquery-ujs": "^1.0.4" 
    }, 
    "devDependencies": {}, 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "git+https://[email protected]/alexung/rent-pseudo.git" 
    }, 
    "author": "", 
    "license": "ISC", 
    "bugs": { 
    "url": "https://github.com/alexung/rent-pseudo/issues" 
    }, 
    "homepage": "https://github.com/alexung/rent-pseudo#readme" 
} 

Meine erste Datei reagieren, die in /components eingeschlossen ist:

import { observer } from 'mobx-react' 

const SearchResultsLayout = observer(React.createClass({ 
    render: function() { 
    return (
     <h1>Hello, World</h1> 
    ) 
    } 
})) 

Aber ich bekomme immer den Fehler VM3275:1 Uncaught ReferenceError: SearchResultsLayout is not defined

Irgendwelche Ideen?

+0

enthalten ist Warum benötigst du diese Datei 'package.json'? Ich denke, "react-rails" benötigt sie nicht. – aks

+0

'SearchResultsLayout ist nicht definiert' klingt wie 'mobx' selbst funktioniert (sonst würde man einen 'Beobachter nicht definiert' bekommen). Ist die Import-Anweisung auf Ihrer Aufrufseite der Komponente korrekt? – mweststrate

+0

@mweststrate Hallo! Liebe mobX btw - Ich arbeite an einem Projekt in meiner Firma, aber das ist mehr für meine persönliche Sache. Ich bin eigentlich ziemlich naiv, wie man Dinge in Schienen importiert. Was ich für React mache, ist das [react-rails-Juwel] (https://github.com/reactjs/reaction-rails), das einen Komponentenordner erstellt, in dem ich meine reaktiven Dateien platzieren kann. Ich bin jedoch verwirrt darüber, wie man Mobx in diesen Prozess einbaut. Wenn ich versuche, einen Beobachter einzubeziehen, bekomme ich den '' Beobachter nicht definiert''' Fehler. –

Antwort

1

Für Interessenten an zu wissen, installiert haben, die react_on_rails Juwel besser für Mobx. Bekam es, um heute Morgen zu arbeiten, indem ich einfach den Edelstein installiere und npm installiere mobx in meine package.json, die im client Ordner

+0

Ich habe ein Muster für die Verwendung von Schienen, reagieren und mobx erstellt. https://github.com/ankitsinghaniyaz/reac-rails-mobx-boilerplate – aks

+0

Dank @AnkitSinghaniya! –

+0

Wie würden Sie irgendwelche Parameter von Schienen zu beobachtbaren Variablen mobx übergeben? – kukrt

0

Sie können mobX von Rails Assets verwenden. https://rails-assets.org/#/?query=mobx

+0

Danke für die Antwort. Ich habe versucht, dieses Juwel in meine gemfile aufzunehmen und dann einen Beobachter aus meiner react-Datei wieder anzurufen, konnte aber keine Ergebnisse erhalten. Ich erhalte immer noch den Fehler 'SearchResultsLayout.js? Body = 1: 1 Uncaught ReferenceError: Beobachter ist nicht definiert' . Das Schmuckstück enthält auch keine expliziten Anweisungen zum Einschließen von Assets. Was sind weitere Schritte von der einfachen Aufnahme des Edelsteins in meine Edelsteindatei? –

+0

Haben Sie mobX in Ihrer application.js benötigt? – aks

+0

Können Sie expliziter mit Ihrem Vorschlag sein? Wie benötige ich es? a // = erfordern Mobx bricht meine Seite. –

1

Es scheint, wie Sie entweder erklären, nicht in Ihrem jsx Datei Reagieren über

import React from 'react'

oder mobx Paket nicht

+0

Danke für den Kommentar - aber wo deklariere ich das? Und ich habe das unten angegebene Mobx-Paket vergeblich heruntergeladen. –

+0

Wenn ich versuche, an der Spitze meiner Jsx-Dateien zu importieren, bekomme ich '' 'VM9182: 1 Uncaught ReferenceError: [Komponentenname einfügen] ist nicht definiert''' –