Değişken İhlal: Dispatch.dispatch (...): Bir dağıtımın ortasında gönderilemiyor

Question

ReactJS projem için ALT kullanıyorum. Ajax araması henüz yapılmadıysa 'gönderim' hatası alıyorum ve başka bir sayfaya geçiyorum.

Çoğunlukla, projem bu şekilde kurulmaktadır. Eylem, mağaza ve bileşen var. componentDidMount yaşam döngüsündeki sunucuda sorgulama yapıyorum.

Eylem:

import alt from '../altInstance' 

    import request from 'superagent' 
    import config from '../config' 

    import Session from '../services/Session' 

    class EventActions { 
    findNear(where) { 
     if (!Session.isLoggedIn()) return 
     let user = Session.currentUser(); 

     request 
     .get(config.api.baseURL + config.api.eventPath) 
     .query(where) 
     .set('Authorization', 'Token token=' + user.auth_token) 
     .end((err, res) => { 
      if (res.body.success) { 
      this.dispatch(res.body.data.events) 
      } 
     }); 
    } 
    } 

    export default alt.createActions(EventActions) 

Mağaza

import alt from '../altInstance' 
    import EventActions from '../actions/EventActions' 

    class EventStore { 
    constructor() { 
     this.events = {}; 
     this.rsvp = {}; 

     this.bindListeners({ 
     findNear: EventActions.findNear 
     }); 
    } 

    findNear(events) { 
     this.events = events 
    } 

    } 

    export default alt.createStore(EventStore, 'EventStore') 

Bileşen

import React from 'react'; 

    import EventActions from '../../actions/EventActions'; 
    import EventStore from '../../stores/EventStore'; 
    import EventTable from './tables/EventTable' 

    export default class EventsPage extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
     loading: true, 
     events: [], 
     page: 1, 
     per: 50 
     } 
    } 

    componentDidMount() { 
     EventStore.listen(this._onChange.bind(this)); 
     EventActions.findNear({page: this.state.page, per: this.state.per}); 
    } 

    componentWillUnmount() { 
     EventStore.unlisten(this._onChange); 
    } 

    _onChange(state) { 
     if (state.events) { 
     this.state.loading = false; 
     this.setState(state); 
     } 
    } 

    render() { 
     if (this.state.loading) { 
     return <div className="progress"> 
      <div className="indeterminate"></div> 
     </div> 
     } else { 
     return <div className="row"> 
      <div className="col m12"> 
       <h3 className="section-title">Events</h3> 
       <UserEventTable events={this.state.events}/> 
      </div>  
     </div> 
     } 
    } 
    } 

Answer 1

componentDidMount() { 
     EventStore.listen(this._onChange.bind(this)); 
     EventActions.findNear({page: this.state.page, per: this.state.per}); 
    } 

Bu benim tahminim olurdu. _onChange'da setState'i tetikleyecek olan ChangeChange'a bağlanıyorsunuz ve ayrıca findNear'dan (gönderim nedeniyle) bir eylem başlatılacak. Yani, her ikisinin de aynı anda güncellenmesi bir an olabilir.

Herşeyden önce, findNear, benim düşüncemde componentDidMount'ta ilk sırada olmalıdır.

Ayrıca 2 differnet görünümde ayrıştırmaya çalışın (örneğin, yalnızca ilk önce verileri görüntülerken, diğeri örnek alındığında dilsiz ve mantıksal olanı). Ayrıca, AltContainer'ın "içeride" benzer şeylere sahip olması nedeniyle oldukça işe yaramayan _onChange eyleminden kaçınmak için AltContainer'ı da kullanmak iyi bir fikirdir.

constructor() { 
    this.events = {}; 
    this.rsvp = {}; 
    this.bindListeners({ 
    findNear: EventActions.findNear 
    }); 
} 

findNear(events) { 
    this.events = events 
} 

Ayrıca ben

constructor() { 
    this.events = {}; 
    this.rsvp = {}; 
} 

onFindNear(events) { 
    this.events = events 
} 

Alt içinde bu bir planı ayrı ediyorum sahiptir eylem adı + üzerinde arayacaktır, bu nedenle findNear denilen eylemi varsa, bu arama olurdu oto Çözümleyiciler gibi oldukça güzel şeyler onFindNear için.

Answer 2

Bu hatayı neden aldığınızı anlayamıyorum çünkü verdiğiniz kod yalnızca tek bir eylem gösteriyor.

Tahminimce, bileşeniniz sisteminizde başka bir işlemin sonucu olarak monte edilmiş olabilir. Eğer öyleyse, hata, componentDidMount'da tetiklenen eylemden kaynaklanır.

Belki Alt'ın action.defer kullanmayı deneyin:

componentDidMount() { 
    EventStore.listen(this._onChange.bind(this)); 
    EventActions.findNear.defer({page: this.state.page, per: this.state.per}); 
} 

Answer 3

Sana bir eylem aradığınız ve istek tamamlandıktan sonra zaman o eylem için sevk yalnızca oluşur yüzünden olduğunu düşünüyoruz.

FindNear eylemini üç eyleme bölmek, findNear, findNearSuccess ve findNearFail öğelerini bulmanızı öneririm.

Bileşen, findNear işlevini çağırdığında, reuqest'i göndermeden önce hemen gönderilmeli, böylece ilgili bileşenlerin devam eden bir talebin güncellenmesi sağlanacaktır (ör.

ve aynı eylemin içinde bir yükleme işareti görüntülerseniz, diğer eylem findNearSuccess öğesini çağırmalıdır.

'Fetching Data' makalesi özellikle yararlı olacaktır.