I am trying to get the state to refresh after a delete request. The correct id is being deleted but it is not refreshing the state at all because the action payload is empty. Below is my current code.
actions\index.js
...
function deleteCustomerSucceeded(customer){
return{
type:"DELETE_CUSTOMER_SUCCEEDED",
payload:{
customer
}
}
}
export function deleteCustomer(id){
return(dispatch) =>{
api.deleteCustomer(id).then((res) => {
dispatch(deleteCustomerSucceeded(res.data))
})
}
...
reducers\index.js
...
case 'DELETE_CUSTOMER_SUCCEEDED':{
return{
...state,
customers: state.customers.filter(customer => customer.id !== action.payload)
}
}
...
api\index.js
export function deleteCustomer(id){
return client.delete(`/customers/${id}`)
}
myview.js
deleteCustomer(){
let state = {submitted: true}
this.props.onDeleteCustomer(this.state.customer.id)
state = {
...state,
customer: this.emptyCustomer,
deleteCustomerDialog: false
}
this.setState(state)
}
Let me know if there needs to be any further clarification or any additional code you may need to see to help answer this question.
After Kapobajza answer I made these changes to my code to make it work.
reducers\index.js
case 'DELETE_CUSTOMER_SUCCEEDED':{
return{
...state,
customers: state.customers.filter(customer => customer.id !== action.payload.id)
}
}
actions\index.js
function deleteCustomerSucceeded(id){
return{
type:"DELETE_CUSTOMER_SUCCEEDED",
payload:{
id
}
}
}
export function deleteCustomer(id){
return(dispatch) =>{
api.deleteCustomer(id).then((res) => {
dispatch(deleteCustomerSucceeded(id))
})
}
}