React Flux 商店发出事件不起作用

Question

出于某种原因，EventEmitter 的发射事件无法正常工作。
HomeStore.emit(CHANGE_EVENT)
这是因为我使用 Coffeescript 吗？

我试图将 5 篇文章提取到一个数组中作为 initialState。当商店发出更改事件时，组件中的 _onChange 方法应该调用 HomeStore.newsLatest() 来更新列表。

Home.js.jsx.coffee

  HomeActions = require "../actions/HomeActions.js.coffee"
  HomeStore = require "../stores/HomeStore.js.coffee"

  Latest = React.createClass {

    getInitialState: ->

      {
        list_latest: HomeActions.fetchLatest(1)
      }
    componentWillMount: ->
      HomeStore.addChangeListener(this._onChange)
    componentDidMount: ->

    componentWillUnmount: ->
      HomeStore.removeChangeListener(this._onChange)
    _onChange: ->
      this.setState {list_latest: HomeStore.newsLatest()}
      console.log "update list_latest"
    render: ->
      `<article className="post-article article clearfix">
      <h2 className="title awesome">
          adfsda
      </h2>
      </article>
      `

  }

HomeActions.js.coffee

HomeDispatcher = require "../dispatchers/HomeDispatcher.js.coffee"
HomeConstants = require "../constants/HomeConstants.js.coffee"

HomeActions =
  fetchLatest: (page) ->
    HomeDispatcher.handleAction {
      actionType: HomeConstants.FETCH_LATEST,
      page: page
    }
  fetchPopular: ->
    HomeDispatcher.handleAction {
      actionType: HomeConstants.FETCH_POPULAR
    }
  fetchFacebook: ->
    HomeDispatcher.handleAction {
      actionType: HomeConstants.FETCH_FACEBOOK
    }

module.exports = HomeActions

HomeStore.js.coffee

HomeDispatcher = require('../dispatchers/HomeDispatcher.js.coffee')
HomeConstants = require('../constants/HomeConstants.js.coffee')
objectAssign = require('object-assign')
EventEmitter = require('events').EventEmitter
CHANGE_EVENT = 'change'

_newsLatest =

  list: []
  set: (data) ->
    console.log "set #{data}"
    @list = data

_newsPopular =
  list: []

_newsFacebook =
  list: []

HomeStore = objectAssign({}, EventEmitter.prototype,
  addChangeListener: (callback) ->
    this.on(CHANGE_EVENT, callback)
  removeChangeListener: (callback) ->
    this.removeListener(CHANGE_EVENT, callback)
  newsLatest: ->
    _newsLatest.list
  setData: (d) ->
    _newsLatest.set d
  newsPopular: ->
    _newsPopular.list
  newsFacebook: ->
    _newsFacebook.list
)

HomeDispatcher.register (payload) ->
  action = payload.action
  switch action.actionType
    when HomeConstants.FETCH_LATEST
      console.log 'FETCH_LATEST'

      $.ajax
        url: HomeConstants.API_URL + action.page
        dataType: "json"
        method: "get"
        success: (res) ->
          HomeStore.setData res.articles

      HomeStore.emit(CHANGE_EVENT)
    when HomeConstants.FETCH_POPULAR
      console.log 'FETCH_POPULAR'
      return HomeStore.emit(CHANGE_EVENT)
    when HomeConstants.FETCH_FACEBOOK
      console.log 'FETCH_FACEBOOK'
      return HomeStore.emit(CHANGE_EVENT)
    else
      true

module.exports = HomeStore

Answer 1

我认为您没有在正确的时间附加事件侦听器。

componentWillMount: ->
  HomeStore.addChangeListener(this._onChange)

这会尝试在安装组件之前向组件添加更改侦听器。尝试将其添加到 componentDidMount:

componentDidMount: ->
  HomeStore.addChangeListener(this._onChange)

编辑（反映评论）：

switch action.actionType
  when HomeConstants.FETCH_LATEST
    console.log 'FETCH_LATEST'

    $.ajax
      url: HomeConstants.API_URL + action.page
      dataType: "json"
      method: "get"
      success: (res) ->
        HomeStore.setData res.articles
        HomeStore.emit(CHANGE_EVENT)
    return

React Flux 商店发出事件不起作用

React Flux store emit event not working

javascript

flux

reactjs

reactjs-flux