3

とりわけ、カテゴリの作成/削除/編集を可能にする React+Reflux アプリケーションを構築しています。これまでのところ、すべてのカテゴリを表示し、関連するストアとアクションを介して React コンポーネント内でカテゴリの作成/削除を処理できます。これはすべてうまく機能し、データベースを更新して、期待どおりにコンポーネントを再レンダリングします。私のこだわりは、編集するために特定の既存のカテゴリにドリルダウンしようとするときです。

特定のカテゴリに固有のデータを取得/設定するために、カテゴリ ID をストアに渡し、それを ajax 呼び出しを介して php/sql クエリに渡す必要があると思います。ストアを完全にバイパスし、ajax 呼び出しをコンポーネント自体に配置すると、React-router を使用して URL パラメーターを介して機能させることができます (もちろん、自動再レンダリングはありません) が、私は理解できませんでしたストアを通じてこれを達成する方法。

言い換えれば、これは多かれ少なかれ機能します：

  • 「ManageCategories」React コンポーネントは、CategoryStore を使用してすべてのカテゴリを一覧表示し、それぞれがカテゴリ ID を「ManageCategory」ルート/コンポーネントに渡すアンカー タグにラップされています
  • 「ManageCategory」コンポーネントは、getInitialState メソッド内の ajax 呼び出しでカテゴリ ID パラメータを直接使用して、カテゴリに固有のデータを表示します。

ただし、以下はこれを行うためのより正しいRefluxの方法だと思いますが、それを機能させる方法がわかりません:

  • 上記と同じ「ManageCategories」コンポーネント
  • そのカテゴリに固有のデータのみを返し、そのカテゴリの更新/編集を処理する CategoryStore (またはおそらく別の「IndividualCategoryStore」?) に何らかの方法でそのカテゴリ ID パラメータを渡す「ManageCategory」コンポーネント

「ManageCategory」コンポーネントの getInitialState メソッドで呼び出され、categoryId パラメータが渡される新しいメソッド (「getCategoryData」) を CategoryStore に追加することで、この機能の一種の不格好なバージョンを得ることができました。これにより、(CategoryStore の getDefaultData からの) すべてのカテゴリのフラッシュに続いて、(コンポーネントの getInitialState からの) 正しい単一のカテゴリ リストが表示されます。

React+Reflux の背後にある概念にはかなり慣れていますが、現時点では、何か基本的なことを誤解している可能性が高いと思います。この特定の問題に1週間以上取り組みましたが、変数をデータストアに渡すという特定の問題に対処する例/チュートリアル/ドキュメントは見つかりませんでした。

行動：

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

洞察や支援をよろしくお願いします。

4

1 に答える 1

3

最終的にここに質問を投稿した後、どこで迷子になっていたかがわかったと思います。ストアからデータの完全なコレクションを取得し、コンポーネント内で選択的に使用するだけでよい場合に、カテゴリ 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>
    );
}
});

Feel free to let me know if there's a better way of doing this but for now this is exactly what I needed. Hopefully something from all of this will be helpful to someone else too.

于 2014-12-22T20:41:20.520 に答える