Как контролировать состояние компонента в таблице(контейнере) in React-Redux?

Question

[Idobrodushniy]

Имеется контейнер, к примеру :

Вопрос в следующем : Каждый Component, которые я рендерю в цикле в контейнере - является строкой таблицы, при нажатии на которую она работает как BS3 accordion. Так вот, как правильно отслеживать через стор нажатие на каждый из элементов в таблице, чтобы именно он открывался? Желательно примеры кода, спасибо .

Answer 1

[kulaeff]

Если я правильно понял вопрос, то как-то так:

handleComponentClick = (id) => {
  // тут можно дернуть экшн, чтобы открыть строку таблицы
}
...
this.jquerylist.map(el => {
  <Component key={el.id} onClick={() => this.handleComponentClick(el.id)}/>
})

Можно сделать все то же самое, только не по ID, а по индексу.
А зачем вы делаете ajax-запрос в componentWillMount? Ведь можно дернуть экшн, который сделает запрос и сохранить результат в стор.
А зачем вы делаете ajax-запрос с помощью jQuery? Вы используете jQuery только ради ajax-запросов? Для этого есть fetch (нативный + есть полифил) или axios.

Comments

[Idobrodushniy]

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

[kulaeff]

У вас в сторе есть массив компонентов (по сути массив объектов), которые вы получили аякс-запросом, так? Так. Вам нужно в каждый элемент массива, то бишь в каждый объект, добавить свойство, например, expanded. И в экшне, который дергается по клику на строку таблицы, зная ID кликнутой строки, вы можете установить expanded: true. Если на словах не очень понятно, постараюсь кодом объяснить.