Удаление элемента из коллекции в f, используя React Redux

Question

Я пытаюсь удалить элемент из коллекции в Firestore, ссылаясь на идентификатор выбранного элемента.Я успешно передаю идентификатор с помощью mapDispatchToProps до тех пор, пока действие не прекратится, но останавливается при попытке удаления в Firestore с помощью delete ().Я думаю, что проблема может быть в моем методе удаления в firestore, поскольку он останавливается там.Может кто-нибудь, пожалуйста, скажите мне, что может быть не так с моим кодом?

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

Answer 1

Вы вызываете импортированную версию deleteProject, а не mapDispatchToProps версию.Это обычная ошибка.

Один из способов исправить это (и предотвратить это в будущем) - переименовать ваше действие в mapDispatchToProps во что-то другое:

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

Тогда вы можете деструктурироватьэто из вашего реквизита и назвать его:

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

Answer 2

Это происходит из-за того, что ваше действие deleteProject не вызывается из dispatch у избыточного.

Если вы будете правильно наблюдать, в вашей функции handleClick вы вызываете действие функции deleteProject напрямую.

handleClick функция должна вызывать deleteProject функцию из реквизита вот так.

Ваша функция handleClick должна быть -

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

Ваш HTML должен быть -

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