Question

我正在使用Expo SDK 26创建一个应用程序 - 我正在制作一个我需要将照片上传到firebase数据库的文章。对于android和ios - Expo提供了Image Picker，允许本地访问图库/捕获图像。

当我收到图像时 - 我正在尝试捕获图像uri，获取图像并将其上传到firebase存储，并引用保存在我的firebase数据库中的图像firebase存储URL。

当我从设备中选择图像时，我的动作创建者会被触发，但是当我发出动作时 - 应用会在发送时停止。我错过了一些明显的东西，还是模式不正确？

如果是这样的话 - 对此有什么好处。

从设备代码中选择图像：

async _pickImage(){
  let result = await ImagePicker.launchImageLibraryAsync({
    allowsEditing: true,
    aspect: [4, 3],
  });

  if (!result.cancelled) {
    this.props.uploadPhoto(result.uri)
  }
};

上传图片代码：

export const uploadPhoto = (uri) => {
return async (dispatch) => {
    dispatch({
        type: ActionTypes.UPLOAD_PROFILE_IMAGE_REQUEST
    })
    const response = await fetch(uri);
    const blob = await response.blob();
    const currentUser = firebase.auth().currentUser
    const userId = currentUser.uid;
    const ref = firebase.storage().ref().child(userId);
    const databaseRef = firebase.database().ref().child("/users/" + userId + "/user-details")

    await ref.put(blob)
        .then((snapshot) => {
            databaseRef.update({
                "photoURL": snapshot.downloadURL
            }).then(() => {
                console.log(snapshot.downloadURL)
                dispatch({
                    type: ActionTypes.UPLOAD_PROFILE_IMAGE_SUCCESS,
                    payload: snapshot.downloadURL
                })
            })
        })
        .catch((error) => {
            dispatch({
                type: ActionTypes.UPLOAD_PROFILE_IMAGE_FAILURE,
                error: error
            })
        })
}
}

Reducer：UPLOAD_PROFILE_IMAGE_REQUEST

    import * as ActionTypes from '../ActionTypes'

    const INITIAL_STATE = {
      userInfo: {},
      error: "",
      isLoading: false,
      image: undefined
    };

export default (state = INITIAL_STATE , action) => {
    switch (action.type) {

      case ActionTypes.GET_USER_DETAILS_REQUEST:
        return {...state, isLoading: true }

      case ActionTypes.GET_USER_DETAILS_SUCCESS:
        return {...state, isLoading: false, userInfo: action.payload}

      case ActionTypes.GET_USER_DETAILS_FAILURE:
        return {...state, isLoading: false, error: action.payload }

      case ActionTypes.UPLOAD_PROFILE_IMAGE_REQUEST:
        return {...state, isLoading: true}

      case ActionTypes.UPLOAD_PROFILE_IMAGE_SUCCESS:
        return {...state, image: action.payload, isLoading: false}

      case ActionTypes.UPLOAD_PROFILE_IMAGE_FAILURE:
        return {...state, error: action.payload, isLoading: false}

      case ActionTypes.CLEAR_USER_DETAILS:
        return {INITIAL_STATE, isLoading: false}

      default:
        return state
    }
}

我在第一次调度后直接尝试了console.log，但是在UPLOAD_PROFILE_IMAGE_REQUEST操作调度后，日志中没有打印出来。

非常感谢任何帮助。

async / await - 调度redux操作：调度操作会导致我的应用程序冻结

0 个答案: