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

Question

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

完成此操作后，我将能够在隐藏字段中输入值作为表单中的引用，该表单将发布到 Firebase 数据库。

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

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

非常感谢您的浏览。

阿尔文

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