React + Reflux: Передача переменных в хранилища данных

Question

Я создаю приложение React + Reflux, которое, помимо прочего, позволяет создавать/удалять/редактировать категории. Пока я могу отображать все категории и обрабатывать создание/удаление категорий в компоненте React через связанные магазины и действия. Все это отлично работает, обновляет базу данных и повторно отображает компонент, как ожидалось. Моя точка приклеивания заключается в том, чтобы попытаться перейти к определенной существующей категории, чтобы ее отредактировать.

I думаю Мне нужно передать идентификатор категории в хранилище, который затем передаст его в запрос php/Если я вообще обойду магазин и поставлю вызов ajax внутри самого компонента, я смогу заставить его работать с параметром url с помощью React-router (без автоматического повторного рендеринга, конечно), но я не смог выяснить как это сделать через магазин.

Другими словами, это более или менее работает:

• «ManageCategories» Реагировать компонент, который использует CategoryStore перечислить все категории каждый завернутые в якорной тег, который передает идентификатор категории вместе с «ManageCategory» маршрут/компонент
• «ManageCategory» компонент использует категорию Id паров непосредственно в Ajax вызова в его методе getInitialState отображать данные, относящиеся к категории

Однако, я думаю, что ниже является более правильным рефлюксом в у сделать это, но я не знаю, как заставить его работать:

• «ManageCategories» компонент же, как и выше
• «ManageCategory» компонент, который каким-то образом передает его идентификатор категории параметров в CategoryStore (или, может быть, другой «IndividualCategoryStore»?), которая возвращает только данные, относящиеся к этой категории и обрабатывает обновления/редактирует к этой категории

Я был в состоянии получить вид неуклюжей версии этой работы, добавив новый метод ("getCategoryData ») в CategoryStore, который вызывается в методе getInitialState компонента« ManageCategory »и передается категоризация ryId param. Это приводит к появлению вспышки всех категорий (из getDefaultData в CategoryStore), за которой следует правильный список отдельных категорий (из getInitialState компонента).

Я чувствую себя довольно комфортно с концепциями, лежащими в основе React + Reflux, но на данный момент я думаю, что, вероятно, я не понимаю что-то фундаментальное. Работала над этой конкретной проблемой более недели, но ни один из примеров/учебников/документов, которые я нашел, не адресует конкретный вопрос о передаче переменной в хранилище данных.

Действия:

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

CategoryStore:

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

Заранее благодарим за понимание или помощь.

Answer 1

После того, как вы отправили мой вопрос здесь, я думаю, что, возможно, я выяснил, с кем я все время сбивался с пути. Я думал о передаче идентификатора категории в хранилище для фильтрации данных в нем, когда мне действительно нужно сделать полный сбор данных из магазина и выборочно использовать его в компоненте.

Таким образом, после перенаправления на компонент ManageCategory с catId, переданным как параметр url, все, что мне нужно сделать, это отфильтровать данные на основе 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> 
    ); 
} 
}); 

Не стесняйтесь, дайте мне знать, если есть лучший способ сделать это, но сейчас это именно то, что мне было нужно. Надеюсь, что-то от всего этого будет полезно и для кого-то другого.