Deleting an item from a collection in f, using React Redux

user_11393696 0
Viewed 3428

I'm trying to delete an item from a collection in Firestore by referencing the id of the selected item. I'm successfully passing on the id by mapDispatchToProps until the action but stops short when trying to delete in Firestore by the delete(). I think the problem may be in the my method to delete in firestore as it stops there. Can anyone kindly please tell me what could be wrong with my code?

import React from 'react'
import { connect } from 'react-redux'
import { firestoreConnect } from "react-redux-firebase";
import { compose } from 'redux'
import { Redirect } from 'react-router-dom'
import moment from 'moment'
import { deleteProject } from '../../store/actions/projectActions'

const handleClick = (e, prop) => {
    e.preventDefault()
    deleteProject(prop)
    console.log(prop)
}

const ProjectDetails = (props) => {
    const { auth, project } = props;
    if (!auth.uid) return <Redirect to='/signin' />
    if (project) {
        return (
        <div className="container section project-details">
            <div className="card z-depth-0">
               // content here
                </div>
                <button onClick={(e) => handleClick(e, props.id)}>Delete</button>
            </div>
        </div>
        )
    } else {
        return (
        <div className="container center">
            <p>Loading...</p>
        </div>
            )
    }

}

const mapStateToProps = (state, ownProps) => {
    const id = ownProps.match.params.id;
    const projects = state.firestore.data.projects;
    const project = projects ? projects[id] : null
    return {
        project: project,
        id: id,
        auth: state.firebase.auth
    }
}
const matchDispatchToProps = (dispatch) => {
    return {
        deleteProject: (id) => dispatch(deleteProject(id))
    }
}

export default compose(
    connect(mapStateToProps, matchDispatchToProps),
    firestoreConnect([
        { collection: 'projects' }
    ])
)(ProjectDetails)

export const deleteProject = (id) => {
  console.log("dispatch", id) \\ successfully shows "dispatch", id
  return(dispatch, getState, {getFirestore}) => {
    const firestore = getFirestore();
    firestore.collection('projects').doc(id).delete()
      .then(() => {
        console.log('deleted') \\ does not show deleted here
        dispatch({ type: 'DELETE_PROJECT_SUCCESS' });
      }).catch(err => {
        dispatch({ type: 'DELETE_PROJECT_ERROR' });
      })
  }
}
react-redux google-cloud-firestore firebase reactjs
2 Answers

You are calling the imported version of deleteProject rather than the mapDispatchToProps version. This is a common gotcha.

One way to fix this (and prevent it happening in future) is to rename your action in your mapDispatchToProps to something different:

const matchDispatchToProps = (dispatch) => {
    return {
        dispatchDeleteProject: (e, id) => {
            e.preventDefault()
            dispatch(deleteProject(id))
        })
    }
}

Then you can destructure this out of your props and call it:

const ProjectDetails = (props) => {
    const { auth, project, dispatchDeleteProject } = props;
    if (!auth.uid) return <Redirect to='/signin' />
    if (project) {
        return (
        <div className="container section project-details">
            <div className="card z-depth-0">
               // content here
                </div>
                <button onClick={e=>dispatchDeleteProject(e, props.id)}>Delete</button>
            </div>
        </div>
        )
    }
user_938120

This is happening because your action deleteProject is not getting called from redux's dispatch.

If you will observer correctly, in your handleClick function, you are calling deleteProject function function action directly.

handleClick function should call deleteProject function from prop like this.

Your handleClick function should be - 

const handleClick = (e, id, deleteProject) => { // passing deleteProject function from prop
    e.preventDefault()
    deleteProject(id)
    console.log(id)
}

You HTML should be - 

<button onClick={(e) => handleClick(e, props.id, props.deleteProject)}>Delete</button>
user_35698930
Related