Search code examples
firebasereact-reduxredux-thunk

How to fix error in redux-thunk: Expected an assignment or function call and instead saw an expression


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.


Solution

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