reactjs - react +回流: Passing Variables to Data Stores

Question

我正在构建一个 React+Reflux 应用程序，除其他外，它允许创建/删除/编辑类别。到目前为止，我能够显示所有类别并通过关联的存储和操作处理 React 组件内类别的创建/删除。这一切都很好，更新了数据库并按预期重新渲染组件。我的症结在于尝试深入到特定的现有类别以对其进行编辑时。

我认为我需要以某种方式将类别 ID 传递给商店，然后该商店将通过 ajax 调用将其传递给 php/sql 查询，以便获取/设置特定于该特定的数据类别。如果我完全绕过商店并将 ajax 调用放在组件本身中，我可以通过 React-router 的 url 参数让它工作(当然没有自动重新渲染)，但我无法弄清楚如何通过商店来实现这一点。

换句话说，这或多或少有效:

• “ManageCategories”React 组件，使用 CategoryStore 列出所有类别，每个类别都包含在 anchor 标记中，该 anchor 标记将类别 ID 传递到“ManageCategory”路由/组件
• “ManageCategory”组件直接在其 getInitialState 方法的 ajax 调用中使用类别 Id 参数来显示特定于类别的数据

但是，我认为下面是更正确的回流方法，但我不确定如何让它发挥作用:

• “管理类别”组件与上面相同
• “ManageCategory”组件以某种方式将其类别 Id 参数传递给 CategoryStore(或者可能是不同的“IndividualCategoryStore”？)，该组件仅返回特定于该类别的数据并处理对该类别的更新/编辑

通过向 CategoryStore 添加一个新方法(“getCategoryData”)，我能够获得此工作的一个笨重版本，该方法在“ManageCategory”组件的 getInitialState 方法中调用，并传递了categoryId 参数。这会导致所有类别(来自 CategoryStore 的 getDefaultData)的闪烁，然后是正确的单个类别列表(来自组件的 getInitialState)。

我对 React+Reflux 背后的概念感到相当满意，但在这一点上，我认为我可能误解了一些基本的东西。针对这个特定问题研究了一个多星期，但我发现的示例/教程/文档都没有解决将变量传递到数据存储的具体问题。

行动:

var Actions = Reflux.createActions([
"createCategory",
"deleteCategory",
"editCategory"
]);

类别商店:

var CategoryStore = Reflux.createStore({
listenables: [Actions],
onCreateCategory: function(catName) {
    // ajax call to create new category that calls updateCategories on success
},
onDeleteCategory: function(catId) {
    // ajax call to delete category that calls updateCategories on success
},
updateCategories: function(){
    $.ajax({
        url: url + '?action=getAllCategories',
        async: false,
        dataType: 'json',
        success: function(categoryData) {
            this.categories = categoryData;
        }.bind(this),
        error: function(xhr, status, err) {
            console.error(url, status, err.toString());
        }.bind(this)
    });
    this.trigger(this.categories);
},
getDefaultData: function() {
    $.ajax({
        url: url + '?action=getAllCategories',
        async: false,
        dataType: 'json',
        success: function(categoryData) {
            this.categories = categoryData;
        }.bind(this),
        error: function(xhr, status, err) {
            console.error(url, status, err.toString());
        }.bind(this)
    });
    return this.categories;
}
});

类别组件:

var Category = React.createClass({
handleDeleteCategory: function() {
    Actions.deleteCategory(this.props.id);
},
render: function() {
    return (
        <li className="category">
            <IconButton icon="action-highlight-remove" onClick={this.handleDeleteCategory} />
            <h5><a href={"/#/manage-category/" + this.props.id}>{this.props.name} ({this.props.id})</a></h5>
        </li>
    );
}
});

管理类别组件:

var ManageCategories = React.createClass({
mixins: [
    Reflux.connect(CategoryStore, "categories")
],
getInitialState: function() {
    return {
        categories: []
    };
},
handleCreateCategory: function() {
    // category creation code
},
render: function() {
    var categoryNodes = this.state.categories.map(function(category) {
        return (
            <Category name={category.name} id={category.id} />
        )
    });
    return (
        <div className="dev-tools-container">
            <h1>Developer Tools</h1>
            <div className="categories">
                <h3>Categories</h3>
                <ul>
                    {categoryNodes}
                </ul>
                <h4>Create New Category:</h4>
                <form>
                    <label htmlFor="new-category-name">Category Name</label> <input type="text" id="new-category-name" /><br />
                    <PaperButton label="Create" primary={true} onClick={this.handleCreateCategory} />
                </form>
            </div>
        </div>
    );
}
});

预先感谢您提供任何见解或帮助。

Answer 1

最终在这里发布我的问题后，我想我可能已经弄清楚我一直误入歧途的地方了。我正在考虑将类别 Id 传递到商店以过滤其中的数据，而我真正需要做的就是从商店中获取完整的数据集合并在组件内有选择地使用它。

因此，一旦将 catId 作为 url 参数传递到 ManageCategory 组件，我所需要做的就是根据 catId 过滤数据。

例如，在 ManageCategory 组件中，我可以使用 lodash 来过滤和提取当前类别的名称值，如下所示。根本不需要编辑存储在 CategoryStore 中的数据集合。

var ManageCategory = React.createClass({
mixins: [
    Reflux.connect(CategoryStore, "categoryData")
],
getInitialState: function() {
    return {
        categoryData: []
    };
},
render: function() {
    var categoryName = _.chain(this.state.categoryData)
                        .filter({"id": this.props.params.catid})
                        .pluck("name");

    return (
        <div className="category-container">
            <h1>{categoryName}</h1>
        </div>
    );
}
});

如果有更好的方法，请随时告诉我，但目前这正是我所需要的。希望所有这些内容对其他人也有帮助。