React/Flux商店不會改變它的狀態

Question

從2個星期前我在我的React/Flux應用程序中遇到問題。它在ES6中完成並使用webpack和babel。

它實際上沒有在_onChange方法的人往裏走專賣店發出的變化事件。因此，組件本身不會在修改後的狀態下再次渲染。

在這裏，你可以看看我的組件：

import React from 'react'; 
import Item from 'components/item/item'; 
import Actions from './item-list.actions'; 
import Store from './item-list.store'; 

const StoreInstance = new Store(); 

class ItemList extends React.Component { 

    constructor(props) { 
     super(props); 
     this._onChange = this._onChange.bind(this); 
     this.state = this.getItemListState(); 
    } 

    componentWillMount() { 
     StoreInstance.addChangeListener(this._onChange); 
     Actions.requestFlats(Actions.setFlats); 
    } 

    componentWillUnmount() { 
     StoreInstance.removeChangeListener(this._onChange); 
    } 

    _onChange() { 
     this.setState(this.getItemListState); 
    } 

    getItemListState() { 
     return { 
      flats: StoreInstance.getFlats() 
     } 
    } 

    render() { 
     return(
      <ul className="item__list">{ 
       this.state.flats.map((flat, index) => { 
        <li className="col-xs-12 col-sm-12 col-md-6 col-lg-6"> 
         <Item key={index} flat={flat}></Item> 
        </li> 
       }) 
      }</ul> 
     ); 
    } 
} 

export default ItemList; 

我的行爲：

import AppDispatcher from 'services/dispacher/dispacher'; 
import Constants from './item-list.constants'; 

let ItemListActions = { 
    getFlats:() => { 
     AppDispatcher.handleAction({ 
      type: Constants.GET_FLATS, 
      data: {} 
     }); 
    }, 

    setFlats: (flats) => { 
     AppDispatcher.handleAction({ 
      type: Constants.SET_FLATS, 
      data: { 
       flats 
      } 
     }); 
    }, 

    requestFlats: (callback) => { 
     AppDispatcher.handleAction({ 
      type: Constants.REQUEST_FLATS, 
      data: { 
       callback 
      } 
     }); 
    } 
}; 

export default ItemListActions; 

和存儲：

import AppDispatcher from 'services/dispacher/dispacher'; 
import AppStore from 'services/store/store'; 

import Api from './item-list.api'; 
import Constants from './item-list.constants'; 

class ItemListStore extends AppStore { 
    constructor() { 
     super(); 
     this.flats = []; 
    } 

    requestFlats(callback) { 
     Api.getFlats(callback); 
    } 

    getFlats() { 
     return this.flats; 
    } 

    setFlats(flats) { 
     this.flats = flats; 
    } 
} 

const ItemListStoreInstance = new ItemListStore(); 

AppDispatcher.register((payload) => { 
    let action = payload.action; 

    switch (action.type) { 
     case Constants.GET_FLATS: 
      ItemListStoreInstance.getFlats(action.data); 
      break; 
     case Constants.SET_FLATS: 
      ItemListStoreInstance.setFlats(action.data.flats); 
      break; 
     case Constants.REQUEST_FLATS: 
      ItemListStoreInstance.requestFlats(action.data.callback); 
      break; 
     default: 
      return true; 
    } 

    ItemListStoreInstance.emitChange(); 
}); 

export default ItemListStore; 

延伸的AppStore

的

import EventEmitter from 'events'; 

const CHANGE_EVENT = 'change'; 

class Store extends EventEmitter { 

    constructor() { 
    super(); 
    } 

    emitChange() { 
    this.emit(CHANGE_EVENT); 
    } 

    addChangeListener(callback) { 
    this.on(CHANGE_EVENT, callback); 
    } 

    removeChangeListener(callback) { 
    this.removeListener(CHANGE_EVENT, callback); 
    } 
} 

Store.dispatchToken = null; 

export default Store; 

我已經多次查看此代碼並查看整個Internet上的示例，但沒有成功。

我的應該是當我這樣做：

StoreInstance.addChangeListener(this._onChange); 

店裏會聽我的變化的事件，但看起來事實並非如此。 當我從API獲取新數據時，我執行setFlats並且_onChange未執行，因此不會顯示UI上的更改。

您是否看到此代碼中的任何問題？任何可以幫助我解決它的東西？

在此先感謝。

Answer 1

這個問題實際上是在其中返回ItemListStore而不是ItemListStore的一個實例，然後在組件我有另一個實例存儲，這就是爲什麼它是不能互相通信。

下面是ItemListStore固定代碼：

import AppDispatcher from 'services/dispacher/dispacher'; 
import AppStore from 'services/store/store'; 

import Api from './item-list.api'; 
import Constants from './item-list.constants'; 

class ItemListStore extends AppStore { 
    constructor() { 
     super(); 
     this.flats = []; 
    } 

    requestFlats(callback) { 
     Api.getFlats(callback); 
    } 

    getFlats() { 
     return this.flats; 
    } 

    setFlats(flats) { 
     this.flats = flats; 
    } 
} 

const ItemListStoreInstance = new ItemListStore(); 

AppDispatcher.register((payload) => { 
    let action = payload.action; 

    switch (action.type) { 
     case Constants.GET_FLATS: 
      ItemListStoreInstance.getFlats(action.data); 
      break; 
     case Constants.SET_FLATS: 
      ItemListStoreInstance.setFlats(action.data.flats); 
      break; 
     case Constants.REQUEST_FLATS: 
      ItemListStoreInstance.requestFlats(action.data.callback); 
      break; 
     default: 
      return true; 
    } 

    ItemListStoreInstance.emitChange(); 
}); 

export default ItemListStoreInstance; 

Answer 2

我在任何地方都看不到您對ItemListStore的任何用法。你的組件正在使用「Store」類，它只擴展了EventEmitter。無法找到與ItemListStore的連接。

這條線（在你ItemListStore）：

ItemListStoreInstance.emitChange(); 

不會觸發您的商店的emitChange（）方法。