React + Redux - アクションが終了するのを待ちますか？

Question

私はReact Dropzoneを使用しています（しかし、私は多くの異なる場所で同じ問題を抱えています）。これが私のメインコンポーネント内の関数である：

onDrop(images) { 
    this.props.dispatch(setImages(images)); 

    this.props.images.forEach(file => { 
    const reader = new FileReader(); 
    reader.onload =() => // render images 
    reader.onerror =() => // display error 
    reader.readAsDataURL(file); 
    }); 
} 

発送はちょうど状態に画像の配列をプッシュして、私は小道具にマップします。

残念なことにディスパッチには時間がかかり、上記の例でははundefinedです。タイムアウトが2秒程度あればうまく動作しますが、それは危険です。

どうすれば修正できますか？私は約束を試みましたが、彼らは誰が働いているのかわかりません。ほとんどが非同期要求のためだと思います。

Answer 1

FileReaderは非同期であり、base64でファイルをプレビューするのに最適な選択肢ではありません。 Base64はより多くのメモリを占有し、前後にデコード/エンコードに時間がかかります。代わりにobject urlを作成することをおすすめします。

ページアプリケーションを1つ構築して、ページをリロードしない場合は、もう不要なときにrevokingを処理する必要があります。

あなたは（他のimage.onloadである）1 2の非同期タスクで逃げることができ

window.URL = window.URL || window.webkitURL 

// Nameing convention: you are passing in files 
// to the function not images, so name it 'files' 

onDrop(files) { 
    this.props.dispatch(setImages(files)) 

    this.props.files.forEach(file => { 
    const url = URL.createObjectURL(file) 
    // render images 
    }) 
}