从异步操作创建者返回有效负载 - React js答案

【问题标题】：Returning payload from async action creator - React js从异步操作创建者返回有效负载 - React js
【发布时间】：2017-10-25 01:57:37
【问题描述】：

我是 javascript 和 React 生态系统的新手，我正在开发一个让用户上传个人资料照片的应用程序。我研究了使用 Superagent 将文件上传到 Cloudinary，这很棒，并在上传组件中使用了它。由于我使用 Redux 处理状态，我将组件中的上传代码重构为上传操作创建器。这绝对可以工作并将文件上传到 Cloudinary。在我的代码中，我试图返回文件 url，当我 console.log 它时会打印出来。我真的需要把它作为动作创建者的有效负载，这样我就可以将它附加到减速器中的状态。我觉得我已经很接近了，但是我无法让文件 url 作为操作的有效负载返回。

一旦我这样做了，我将能够在隐藏字段中输入值作为将发布到 firebase 数据库的表单中的 ref。

如果有人知道我的意思并能告诉我我做错了什么，我将不胜感激。

这是 ActionCreator：

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
    }
}

这是图像缩减器：

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;
}

非常感谢您的观看。

阿尔文

【问题讨论】：

标签： javascript reactjs file-upload react-redux asyncfileupload

【解决方案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);
            }
        })
    }
}

【讨论】：