非同期アクションクリエイターからペイロードを返す - 反応するjs

Question

私はJavaScriptとReactエコシステムが初めてで、ユーザーがプロフィール写真をアップロードできるようにするアプリを開発中です。 Superagentを使用してCloudinaryにファイルをアップロードすることを研究しました。これはアップロードコンポーネントで使用されています。私はReduxを使って状態を処理しているので、コンポーネントのアップロードコードをアップロードアクション作成者にリファクタリングしました。それは間違いなくCloudlyにファイルをアップロードしています。コードでは、ファイルurlを返そうとしています。これは、console.logです。私は実際にこれをアクションクリエイターのペイロードにする必要があるので、それを減速機の状態に付けることができます。私はとても近づいているように感じますが、アクションのペイロードとして戻ってくるファイルURLを取得することはできません。

これを実行すると、非表示フィールドの値をfirebaseデータベースに投稿するフォームのrefとして入力することができます。

誰かが私の言いたいことを知っていて、私が間違っていることを私に示すことができれば、私は最も感謝しています。

import { 
 
    UPLOAD_IMAGE 
 
} from '../actions/types'; 
 

 
const INITIAL_STATE = {}; 
 

 

 
export default (state = INITIAL_STATE, action) => { 
 
    console.log(state, action.payload); 
 
    switch (action.type) { 
 
     case UPLOAD_IMAGE: 
 
     return [ ...state, action.payload ] 
 
    } 
 
    return state; 
 
}

おかげでたくさんのために：

import request from 'superagent'; 
 
import { 
 
    UPLOAD_IMAGE, 
 
    FETCH_PARTNERS 
 
} from './types'; 
 

 
const UPLOAD_PRESET = 'testPreset1'; 
 
const UPLOAD_URL = 'https://api.cloudinary.com/v1_1/duqn30c4x/image/upload'; 
 

 
export const dropImage = file => { 
 
    let uploadedFileUrl = ''; 
 
    let data; 
 
    let fileURL; 
 
    let upload = request.post(UPLOAD_URL) 
 
         .field('upload_preset', UPLOAD_PRESET) 
 
         .field('file', file) 
 
    upload.end((err, response) => { 
 
     if(err) { 
 
      console.log(err); 
 
     } 
 
     if(response.body.secure_url !== '') { 
 
      uploadedFileUrl = response.body; 
 
      return uploadedFileUrl.secure_url, console.log(uploadedFileUrl.secure_url); 
 
     } 
 
    }) 
 
    return{ 
 
     type: UPLOAD_IMAGE, 
 
     payload: uploadedFileUrl 
 
    } 
 
}

これは、画像縮小である：

この

はActionCreatorです見てみましょう。

アルビン

Answer 1

は非同期アクションから派遣するredux-thunkを使用しています。

export const dropImage = file => { 
    return (dispatch, getState)=>{ 
     let uploadedFileUrl = ''; 
     let data; 
     let fileURL; 
     let upload = request.post(UPLOAD_URL) 
          .field('upload_preset', UPLOAD_PRESET) 
          .field('file', file) 
     upload.end((err, response) => { 
      if(err) { 
       console.log(err); 
      } 
      if(response.body.secure_url !== '') { 
       uploadedFileUrl = response.body; 
       dispatch({ 
        type: UPLOAD_IMAGE, 
        payload: uploadedFileUrl 
       }) 
       console.log(uploadedFileUrl.secure_url); 
      } 
     }) 
    } 
}