Question

我想在加载页面时显示消息列表。我呼叫action和addChangeListener订阅componentDidMount中的更改，希望我可以从store从服务器获取数据，但调用addChangeListener但是callback未被调用。似乎this.on('change', callback)中的store无法正常工作。有谁知道我的代码是什么问题？我遵循关于通量repo

的例子

此外，api在商店中调用后端数据的适当位置在哪里？如果我在商店类的吸气器中这样做，可以吗？

感谢。

组件/ MessageList.js

class MessageList extends Component {

  constructor(props) {
    super(props)
    this.renderMessage = this.renderMessage.bind(this)
    this.state = {

      loaded: false,
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      })
    }
  }

  componentDidMount() {
    messageActions.getAll()
    messageStore.addChangeListener(this._onChange)
  }


  _onChange() {
    console.log('on change') // <-- not being called from this point
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(messageStore.getAll())
    })
  }

  //...
}

存储/ MessageStore.js

let _messages = {}

function create(text, latitude, longitude) {

  fetch('http://localhost:3000/api/message', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      content: text,
      latitude: latitude,
      longitude: longitude
    })
  })
  .then(r => r.json())
  .then(data => {
    this.props.navigator.pop()
  })
  .done()
}


function getAllMessages(callback) {
  fetch('http://localhost:3000/api/message')
    .then((res) => res.json())
    .then((data) => {

      callback(data)

    })
    .done()
}

class MessageStore extends EventEmitter {

  constructor() {
    super()

  }

  emitChange() {
    this.emit('change')
  }

  addChangeListener(callback) {
    console.log('here') // <-- works
    // this.on('change', callback) // <-- not working
    this.on('change', () => console.log('helloooo')) // <-- not working
  }

  getAll() {
    return _messages
  }

}

dispatcher.register(action => {

  switch(action.actionType) {

    case 'MESSAGE_CREAT':
      text = action.text.trim();
      if (text !== '') {
        create(text, action.latitude, action.longitude)
        messageStore.emitChange()
      }
      break
    case 'MESSAGE_ALL':
      console.log('store..');
      getAllMessages(data => _messages = data)
      messageStore.emitChange()

  }

})


const messageStore = new MessageStore()
export default messageStore

Answer 1

您无法在商店中调用更改侦听器，您只能在那里进行设置。尝试添加：

addChangeListener(callback) {
    this.on('change', callback);
}

而不是：

addChangeListener(callback) {
   console.log('here') // <-- works
   // this.on('change', callback) // <-- not working
   this.on('change', () => console.log('helloooo')) // <-- not working
}

当发生更改时，商店中的changeListener将在MessageList中触发更改侦听器：

messageStore.addChangeListener(this._onChange)

然后将调用_onChange函数。

flux controller-view未订阅商店中的事件更改

1 个答案: