Question

我在节点 + mongoose + 反应 + 倒退应用中蘸我的脚。

我也试图创建我的第一个同构应用程序。但是，当我浏览整个事情时，我得到以下错误

Running "browserify:client" (browserify) task
>> Error: Cannot find module './mongo' from 'project_folder/node_modules/mongoose/node_modules/mquery/lib/collection'

这个问题发生在我需要（＆＃39; mongoose＆＃39;）的某个地方

我认为这是因为猫鼬无法在客户端工作？但我不知道我应该如何填充（Re）Flux商店？

这是我定义的商店的片段（mongoose已经连接到另一个文件中的mongo，当我没有浏览器时，我确实得到了输出）

＆＃13;

var Reflux=require('reflux');
var mongoose=require('mongoose');

var _snippets=[];

var snippetSchema = new mongoose.Schema({
    title: String,
    data: String
});
var Snippet = mongoose.model('Snippet', snippetSchema);

var SnippetStore = Reflux.createStore({

    init: function() {
        Snippet.find(function(err, snippets) {
            _snippets = snippets;
        });
    },


    getSnippets:function() {
        return Snippet.find(function(err, snippets) {
            if (err) return console.error(err);
            return snippets;
        });
    }

});

module.exports=SnippetStore;

＆＃13;

Answer 1

AFAIK你不能运行mongo客户端。你需要做一些客户端到服务器端的ajax。

将道具传递给应用

用于同构JS的

Pro-tip 是使用初始道具启动应用程序（即最顶层的组件），并继续使用flux / reflux /在客户端使用ajax调用填充它你的服务器端。

有several ways to push initial props to your app。你让服务器呈现道具，例如在脚本标记中（伪代码如下）：

// Server-side: Put initial props on the template
<script id="reactprops">
    { JSON.stringify(initialProps) }
</script>

...以及使用以下方式在模板上呈现应用程序：

// Server-side: Render component
React.renderComponentToString(AppComponent(initialProps))

然后客户端应该拿起道具，例如如果您有一个标识为reactprops的脚本标记，则可以使用以下标记：

// Client-side: Pick up props on #reactprops
var props = JSON.parse(document.getElementById('reactprops').innerHTML);

...然后用：

运行道具

// Client-side: Render component
React.renderComponent(AppComponent({initialProps: props}));

将道具传递给Reflux商店

此外，您的应用需要启动商店，这可以通过您应用组件中的componentDidMount轻松完成。您可以将收到的初始道具传递给您的回流商店，如下所示：

// You need to create an action that is called when the App has mounted
var Actions = createActions(['appDidStart' /* snip-snip */]);

var App = React.createClass({
    componentDidMount: function() {
        Actions.appDidStart(this.props.initialProps);
    },
    render: function() { /* snip-snip */ }
});

同时在您的商店中，您需要收听appDidStart操作，如下所示：

var SnippetsStore = Reflux.createStore({
    init: function() {
        this.listenTo(Actions.appDidStart, this.onLoad);
    },
    onLoad: function(initialProps) {
        /* do something with initialProps */
    },
    /* snip-snip */
});

希望这对你有意义。

浏览时无法找到./mongo

1 个答案:

将道具传递给应用

将道具传递给Reflux商店