Storing image url in firebase (React)

I’m working a side project using react, redux and firebase as backend.

Right now I was looking a way to store the URL of the image I was uploading into my firestore database along side other data.

This is what is working at the moment:

Action addProduct.js

export const addProduct = (product) => {
return (dispatch, getState, { getFireStore }) => {
    const db = firestore;
    const uploadTask = storage.ref(`images/${}`).put(product.image);
        snapshot => {},
        error => {
        () => {
                .then(url => {
                    let updatedProduct = {
                        image: url
                    }).then(() => {
                            type: ADD_PRODUCT,
                    }).catch((err) => {
                        dispatch({ type: ADD_PRODUCT_ERR, err })

Couple of things bugging me here:

  1. While it successfully uploads the image and stores its url in the database, this code looks really messy from my perspective. Can an action file be this complex? Is there a more cleaner way to do this?
  2. My reducer is returning an undefined payload for some reason I can’t find.

Reducer productReducer.js

import { ADD_PRODUCT, ADD_PRODUCT_ERR } from "../actions/types"

const initialState = {
    product: null

export default (state = initialState, action) => {
    switch(action.type) {
        case ADD_PRODUCT: 
            console.log('Product Added', action.product)
            return state
        case ADD_PRODUCT_ERR:
            console.log('Product Failed', action.err)
            return state
            return state