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 в "одиночном" магазине?

0 ответов

Другие вопросы по тегам