Question

我是回流的新手，听动作时遇到问题。

// 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也获得了数据。如何将两个具有不同数据的componentX分开？

已更新：这两个选择都具有相同的存储，因此没有不同的数据。返流如何重复使用？

在RefluxJS "single" store?处结束我的帖子

回流：从多个组件X收听同一商店的动作

0 个答案: