使用 Redux 和 React 时无法从 Firebase 集合中删除数据（文档）

Question

我正在研究 React 和 Redux，在解决这个问题几个小时后，我仍然无法使用 React 和 Redux 在 Firebase 中删除文档。

我在仪表板中显示项目摘要，并尝试添加删除按钮。

单击按钮后，项目将传递到我要删除项目的projectActions.js 操作。在此之后，我想将类型发送到projectReducer.js。当我单击按钮时，我没有收到错误，并且在返回后我无法输出任何console.log。我确实将项目数据放入removeProject() 函数中。

我已经尝试删除removeProject() 和console.log 中的return 方法被传递的项目。我可以获得project.id 并将其添加到firestore.collection.delete() 函数中。但是由于返回后没有任何效果，这是不可能的。

ProjectSummary.js:

import React, { Component } from 'react'
import moment from 'moment'
import { connect } from 'react-redux'
import { removeProject } from '../../store/actions/projectActions'
import { Link } from 'react-router-dom'

class ProjectSummary extends Component {
  state = {
    project: this.props.project
  }

  handleRemove = (e) => {
    e.preventDefault()
    removeProject(this.state.project)
  }

  render() {
    const { project }  = this.props
    return (
      <div className="card z-depth-0 project-summary">
        <div className="card-content grey-text text-darken-3">
        <Link key={project.id} to={'/project/' + project.id}>
          <span className="card-title">{project.title}</span>
        </Link>
        <p>Posted by {project.authorFirstName} {project.authorLastName}</p>
        <p className="grey-text">{moment(project.createdAt.toDate()).calendar()}</p>
          <a className="waves-effect waves-light btn" onClick={this.handleRemove}>Remove</a>
        </div>
      </div>
    )
  }
}

const mapDispatchToProps = (dispatch) =>  {
  return {
    removeProject: (project) => dispatch(removeProject(project))
  }
}

export default connect(null, mapDispatchToProps)(ProjectSummary)

projectActions.js:

export const removeProject = (project) => {
  return (dispatch, getState, { getFirestore }) => {
    const firestore = getFirestore()

    firestore.collection('projects').doc(project).delete()
    .then(() => {
      dispatch({ type: 'REMOVE_PROJECT' })
  }).catch(function(err) {
      dispatch({ type: 'REMOVE_PROJECT_ERROR', err})
    });
  }
}

projectReducer.js:

const projectReducer = (state = initState, action) => {
  switch (action.type) {
    case 'CREATE_PROJECT':
      console.log("Created Project", action.project)
      return state
    case 'CREATE_PROJECT_ERROR':
      console.log('create project error', action.err)
      return state
    case 'REMOVE_PROJECT':
      console.log('Removed Project')
      return state
    case 'REMOVE_PROJECT_ERROR':
      console.log('Removed Project Error', action.err)
      return state

    default:
      return state
  }
}

Answer 1

穿上这个：

ProjectSummary.js

    (…)
        import { removeProject } from '../../store/actions/projectActions' 
        import { connect } from 'react-redux';
        (…)
        class ProjectSummary extends Component {
        state = {
          project: this.props.project
        } 
        render() {
        const { project, deleteProject}  = this.props 
        (…) 

            <button onClick={ () => removeProject(project.id)}>Delete</button>

        (…)

            const mapDispatchToProps = (dispatch) => {
              return {
               removeProject: (id) => { dispatch(removeProject(id))},
              }
             }
        export default connect(null, mapDispatchToProps)(ProjectSummary)

并且 projectActions.js

(…)
export const removeProject = (id) => {
    return (dispatch, getState, { getFirestore }) => {
    const firestore = getFirestore()
    firestore.collection('projects').doc(id).delete();
    }
  }