ReactJSは、アクションが

Question

は私が持っている完了した後にのみ、何かをします。

アクションが完了した後でのみ、どのようにsetStateを実行できますか（成功または失敗に関係なく）？ここで

---

は私のアクションです：

import qwest from 'qwest'; 

export default function SetJobChaserDate(actionContext, payload) { 
    return qwest.post('jobs/set/chaser-date', {id: payload.id, date: payload.date}, {responseType: 'json'}) 
     .then(function (response) { 

      actionContext.dispatch('RECEIVED_JOBS_DATA', {data: response.response, clear: false}) 

     }) 
} 

---

import { EventEmitter } from 'events'; 

class JobStore extends EventEmitter { 

    constructor() { 
     super(); 
     this.jobs = new Map(); 
     this.counts = {}; 
     this.loading = false; 
    } 

    handleJobsData(payload) { 
     if (payload.clear === true) { 
      this.jobs = new Map(); 
     } 
     payload.data.jobs.forEach((job) => { 
      this.jobs.set(job.id, job); 
     }); 
     if(payload.data.counts) { 
      this.counts = payload.data.counts; 
     } 
     this.loading = false; 
     this.emit('change'); 

    } 

    handleReceiving() { 
     this.loading = true; 
     this.emit('loading'); 
    } 

    handleCounts(payload) { 
     console.log(payload) 
    } 

    getCounts() { 
     return this.counts; 
    } 

    getJobs() { 
     return this.jobs; 
    } 

    dehydrate() { 
     return this.jobs; 
    } 

    rehydrate (state) { 

    } 

} 

JobStore.dispatchToken = null; 

JobStore.handlers = { 
    'RECEIVED_JOBS_DATA': 'handleJobsData', 
    'RECEIVED_COUNTS' : 'handleCounts', 
    'RECEIVING_JOB_DATA': 'handleReceiving' 
}; 

JobStore.storeName = 'JobStore'; 

export default JobStore; 

---

更新：

componentWillReceiveProps() { 
     this.context.getStore(JobStore).on('change',() => { 
      this.setState({ 
       updatingField: false 
      }); 
     }); 
    } 

    onKeyPress(id, e) { 
     if (e.key == 'Enter') { 
      this.saveField(id, e.target.value); 
     } 
    } 

    onBlur(id, e) { 
     this.saveField(id, e.target); 
    } 

    saveField(id, target) { 
     console.log(target) 
     this.setState({ 
      updatingField: true 
     }) 
     this.context.executeAction(SetJobChaserDate, {date: target.value, id: id}); 
     this.setState({ 
      editingChaser: false, 
      editingTrackingSent: false 
     }) 
    } 

Answer 1

あなたはupdating状態を使用している、そのよあなたのプロセスは非同期です。ディスパッチしているコードは確かに約束されており、処理が完了したらアクションをディスパッチします：'RECEIVED_JOBS_DATA'。

したがって、updatingFieldは、店舗から来るコンポーネント小道具に移動する必要があります。また、アクションの開始と終了時に減速機で変更されます。

このようにして、コンポーネント内のthis.props.updatingFieldを使用できます。値はストアから取得され、外部リクエストの現在の状態に依存します。

このようにして、ローカル状態の代わりにグローバル状態を優先する1つのReact/Fluxのベストプラクティスに従います。