i'm trying to send images to firebase store with the help of redux-thunk. The code works perfect withiout redux.
Edited: this is the thunk with mistake ./src/Thunks/index.js
// uploadReducer Thunk
import {uploadImagesPending, uploadImagesProgress, uploadImagesSuccess, uploadImagesError} from '../Actions';
import fire, { auth } from '../fire';
// import store from '../index';
function uploadImages(images) {
return dispatch => {
dispatch(uploadImagesPending());
// const images = store.getState().images;
const userID = fire.auth().currentUser.uid;
const uploadTask = fire.storage().ref(`users/${userID}`).child(`images/${images.name}`).put(images);
uploadTask.on('state changed', (snapshot) => {
const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
dispatch(uploadImagesProgress(progress))
}),
(error) => {
dispatch(uploadImagesError(error))
},
() => {
fire.storage().ref('images').child(images.name).getDownloadURL().then(url => {
dispatch(uploadImagesSuccess(url))
})
}
}
}
export default uploadImages;
Simple actions and reducer...
images coming from Upload component
handleChange(event) {
if(event.target.files[0]) {
const targetImages = event.target.files[0];
this.setState({
images: targetImages
});
}
}
uploadImage() {
const { uploadImages } = this.props;
const { images } = this.state;
uploadImages(images);
}
But catch
Failed to compile. ./src/Thunks/index.js Line 17: Expected an assignment or function call and instead saw an expression no-unused-expressions Search for the keywords to learn more about each error.
The problem is you put )
of uploadTask.on
function in wrong position. The correct should be
uploadTask.on('state changed', (snapshot) => {
const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
dispatch(uploadImagesProgress(progress));
},
(error) => {
dispatch(uploadImagesError(error));
},
() => {
fire.storage().ref('images').child(images.name).getDownloadURL()
.then((url) => {
dispatch(uploadImagesSuccess(url));
});
});