我正在构建一个React + Reflux应用程序，除其他外，该应用程序允许创建/删除/编辑类别。到目前为止，我已经能够显示所有类别并通过关联的存储和动作处理React组件中类别的创建/删除。这一切都很好，可以更新数据库并按预期重新提供组件。我的重点是尝试向下钻取特定的现有类别以进行编辑时。
我想我需要以某种方式将类别ID传递给商店，然后再通过ajax调用将其传递给php / sql查询，以便获取/设置特定于该特定类别的数据。如果我完全绕过商店并将ajax调用放在组件本身内，那么我可以通过React-router的url参数使它工作（当然不会自动重新渲染），但我无法弄清楚如何通过商店来做到这一点。
换句话说，这或多或少起作用：
但是，我认为以下是执行此操作的更正确的Reflux方式，但是我不确定如何使它工作：
通过将新方法（“ getCategoryData”）添加到CategoryStore中，我能够获得这种工作的笨拙版本，该方法在“ 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>
);
}
});
ManageCategories组件：
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>
);
}
});
预先感谢您的任何见解或帮助。
在最终将我的问题发表在这里之后，我想我可能已经弄清楚了我一直误入歧途。我在考虑将类别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>
);
}
});
随时让我知道是否有更好的方法可以执行此操作，但是现在这正是我所需要的。希望所有这些都可以对其他人有所帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句