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

Question

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

一旦我这样做，我将能够在一个隐藏字段中输入值作为 ref 的形式，将 post 到 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);
            }
        })
    }
}

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

Returning payload from async action creator - React js

javascript

file-upload

asyncfileupload

reactjs

react-redux