Reducer logs 'deleted' but it still exists in firestore database...? - reactjs

Question

'id' gets sent through action and reducer and logs out 'deleted' but doesn't actually delete from firestore database...
clientlist:
class Clients extends Component {
handleClick = (id) => {
// e.preventDefault();
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)
action:
export const deleteClient = (id) => {
return(dispatch, getState, {getFirestore, getFirebase}) => {
const firestore = getFirestore();
firestore.collection("clientList").doc(id).delete().then(() => {
dispatch({type: 'DELETE CLIENT'})
}).catch((err) => {
dispatch({type: 'DELETE CLIENT ERROR', err})
});
}
}
let me know if you need any other code or information. ps, there is no error logging out into the console.

Answer 1

Try this. .doc(id) because id has to be string.
I dont think you need / inside doc.
Check the api.
export const deleteClient = (id) => {
console.log(id);
return(dispatch, getState, {getFirestore, getFirebase}) => {
const firestore = getFirestore();
firestore.collection('clientList').doc(id).delete().then(() =>{
dispatch({type: 'DELETE CLIENT'})
}).catch((err) => {
dispatch({type: 'DELETE CLIENT ERROR', err})
})
}
}