Question

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

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

这是Image Reducer：

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

1 个答案: