Reducer注销“已删除”，但firebase项仍然存在... REACT

Question

这与我之前的问题类似，但是没有得到解决，没有人对此做出任何回应，所以我想我会再试一次。

我有一个客户端列表和每个客户端旁边的删除按钮。当我单击删除时，它将客户端的id发送到deleteClient操作，然后依次将一个分派发送到reducer，后者注销“ deleted”。但是，该物品仍在我的firebase集合中。发生了什么事？

这是Client.js

import React, { Component } from 'react'
import AddClient from './AddClient'
import {connect} from 'react-redux'
import {deleteClient} from '../../store/actions/clientActions'
import {firestoreConnect} from 'react-redux-firebase'
import {compose} from 'redux'

class Clients extends Component {

  handleClick = (id) => {
    this.props.deleteClient(id)
  }

  render() {
    const {clientList} = this.props
    return (
      <div className="container mt-5 text-center">
        <h2>Here Are Your List of Clients...</h2>
        {clientList && clientList.map(client => {
          return(
            <div key={client.id}>
              <div className="my-2">
                Client Name: {client.name} | Client Price: ${client.price}
                <button className="ml-2" onClick={() => {this.handleClick(client.id)}}>x</button>
              </div>      
            </div>
          )
        })}
        <AddClient/>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    clientList : state.firestore.ordered.clientList,
  }
}

const mapDispatchToProps = (dispatch) => {
  return{
    deleteClient : (id) => dispatch(deleteClient(id)) 
  }
}

export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  firestoreConnect([
    {collection: 'clientList', orderBy: 'name'},
  ])
)(Clients)

这是clientActions.js

export const addClient = (client) => {
    return(dispatch, getState, {getFirestore, getFirebase}) => {
        const firestore = getFirestore();

        firestore.collection('clientList').add({
            ...client, 
            id: Math.random().toString(),
            createdAt: new Date(),

        }).then(() => {
            dispatch({type: 'ADD CLIENT', client})
        }).catch((err) => {
            dispatch({type: 'ADD CLIENT ERROR', err})
        })
    }
}

export const deleteClient = (id) => {
    return(dispatch, getState, {getFirestore, getFirebase}) => {
        const firestore = getFirestore();
        firestore.collection('clientList').doc(id).delete().then(() => {
            console.log(id);
            dispatch({type: 'DELETE CLIENT'})
        }).catch((err) => {
            dispatch({type: 'DELETE CLIENT ERROR', err})
        })
    }     
}

最后，这是我的clientReducer.js

const initState = {
    clientList: []
}

const clientReducer = (state = initState, action) => {
    switch (action.type) {

        case 'ADD CLIENT' : 
            console.log('Client Added', action.client);
            return state;

        case 'ADD CLIENT ERROR' : 
            console.log('Client was NOT added, error:', action.err)
            return state;

        case 'DELETE CLIENT' :
            console.log('Client Deleted');
            return state;

        case 'DELETE CLIENT ERROR' : 
            console.log('Client was NOT deleted, error:', action.err)
            return state;

        default : return state;
    }
}
export default clientReducer