Reflux: прослушивание действий нескольких компонентов X в одном магазине
Я новичок в рефлюксе, и у меня проблема с прослушиванием действий.
//StoreX.js
import Reflux from 'reflux'
import Actions from './actions'
export default class StoreX extends Reflux.Store {
constructor() {
super()
this.state = {
data: [],
}
this.listenables = Actions
}
onInit(data) {
this.setState({ data })
}
}
//ComponentX.js
import React from 'react'
import Reflux from 'reflux'
import Store from './store'
import Actions from './actions'
export default class ComponentX extends Reflux.Component {
constructor(props) {
super(props)
this.store = Store
}
...
componentDidMount() {
const { data } = this.props
if (data) {
Actions.init(data)
}
}
render() {
const { data } = this.state
console.log(data) //[1,2,3,4,5]
...
}
}
//action.js
import Reflux from 'reflux'
export default Reflux.createActions(['init'])
//PageX.js
import ComponentX from './components/ComponentX'
export default class PageX extends React.Component {
...
render() {
return (
<div className="row">
<div className="col">
<ComponentX data={[1,2,3,4,5]} /> {/* Select #1 */}
</div>
<div className="col">
<ComponentX /> {/* Select #2 */}
</div>
</div>
)
}
}
Я установил данные в #1, но #2 тоже получил данные. Как я могу разделить 2 componentX с разными данными?
Обновлено: оба этих выбора имеют одинаковое хранилище, поэтому он не имеет разных данных. Как рефлюкс можно использовать повторно?
Заканчиваете мой пост здесь RefluxJS в "одиночном" магазине?