Reduxフォーム：送信する前にReduxフォームにイメージURLを追加するにはどうすればよいですか？

Question

ファイルのアップロードでフォームを設定しました。ここでは、別のリクエストでCloudineに画像をアップロードします。私がしたいのは、CloudnodeからのレスポンスObjectからイメージURLを取得し、それを私のreduxフォームに渡し、他のフォーム値と共にすべてサーバーとデータベースに送信することです。これまでのところ私の要求は、どのように私は、応答からこの画像のURLデータを追加することができますし、私のサーバーに送信する前に私Reduxのフォームに渡し、この

onChange(event) { 
    let formData = new FormData(); 
    formData.append('file', event.target.files[0]); 
    formData.append('upload_preset', UPLOAD_PRESET); 

    axios({ 
    url: `${COUDINARY_ROOT_URL}`, 
    method: 'POST', 
    headers: { 
     'Content-Type': 'application/x-www-form-urlencoded' 
    }, 
    data: formData 
    }).then((res) => { 
    console.log(res); 

    }).catch((err) => { 
    console.err(err); 
    }); 

私の問題があるように見えますか？

効率的でない場合は、推奨事項にも本当に感謝しています。

Answer 1

フォームコンポーネント（例：入力タグ、チェックボックスなど）を介してデータを渡すと、reduxフォームは状態を保存できると思います。しかし、この場合、変数からストアにデータを格納する必要があります。私はredux形式の手段を知らないので、代わりにreduxを使うことをお勧めします。

URLとフォームの両方のデータをサーバーとデータベースに送信するもう1つの要求を行う唯一の目的のためにイメージURLを保存する場合、実際にはreduxストアに保存する必要はありません。下のコードに示すように、次の約束のチェーンで使用できるように返すことができます。

しかし、あなたがまだ何か他の理由で店に保存することを依頼しているなら、私はあなたの還元店にURLを保存するアクションをディスパッチします。

getImageUrl(formData) { 
    return axios({ 
    url: `${COUDINARY_ROOT_URL}`, 
    method: 'POST', 
    headers: { 
     'Content-Type': 'application/x-www-form-urlencoded' 
    }, 
    data: formData 
    }); 
} 

sendDataToServer(url, formData) { 
    // ... send url and formData to my server 
} 

onChange(event) { 
let formData = new FormData(); 
formData.append('file', event.target.files[0]); 
formData.append('upload_preset', UPLOAD_PRESET); 
getImageUrl(formData) 
    .then(res => { 
    // assuming res.url contains the url and 
    // saveUrl is a method wrapped in dispatch from 
    // mapDispatchToProps 
    this.props.saveUrl(res.url); 

    // return res.url so that it can be used in the 
    // next then chain 
    return res.url; 
    }) 
    .then(url => { 
    // we can get the url from previous promise chain 
    sendDataToServer(url, formData); 

    // ... rest of code 

    }) 
    .catch(err => console.err(err)) 

}