Nested Routes does not re render ParentComponent after Update And Delete Function? - reactjs

Question

I am having with Re-render with parent functional component. My update and delete functions are handled in Redux after success execution does not re-render parent functional component
***This my Main component where i am getting clients from Api USing Redux it is working working
import React, { Fragment,useEffect } from 'react'
import {connect} from 'react-redux';
import {getClients,deleteClient} from '../Redux//actions/clientActions';
import {Spin,Table,Tag,Button} from 'antd';
import { Link } from 'react-router-dom';
import Moment from 'react-moment'
const Clients =({getClients,deleteClient,client:{clients,loading},history})=> {
useEffect(()=>{
getClients()
}
,[getClients]);
const columns = [
{
title:'Company',
dataIndex: 'companyName',
key: 'companyName',
render: text => <a>{text}</a>,
},
{
title: 'Type',
dataIndex: 'type',
key: 'type',
},
{
title: 'Price Type',
dataIndex: 'typePrice',
key: 'typePrice',
},
{
title: 'Partita Iva',
dataIndex: 'partitaIva',
key: 'partitaIva',
},
{
title: 'Codice Fiscale',
dataIndex: 'codiceFiscale',
key: 'codiceFiscale',
},
{
title: 'Name',
dataIndex: 'name',
key: '1',
},
{
title: 'SurName',
dataIndex: 'surname',
key: '2',
},
{
title: 'Address',
dataIndex: 'address',
key: '3',
},
{
title: 'City',
dataIndex: 'city',
key: '3',
},
{
title: 'Zip',
dataIndex: 'zip',
key: '4',
},
{
title: 'Country',
dataIndex: 'country',
key: '5',
},
{
title: 'Phone',
dataIndex: 'phone',
key: '6',
},
{
title: 'Email',
dataIndex: 'email',
key: '7',
},
{
title: 'Domains',
key: 'domains',
dataIndex: 'domains',
render: domains => (
<span>
{domains&&domains.map(domain => {
let color = domain.length > 5 ? 'geekblue' : 'green';
return (
<Tag color={color} key={domain}>
{domain.toUpperCase()}
</Tag>
);
})}
</span>
),
},
{
title: 'Notes',
dataIndex: 'notes',
key: 'notes',
},
{
title: 'Creator Id',
dataIndex: 'createdByID',
key: 'createdByID',
},
{
title: 'Date',
dataIndex: 'date',
key: 'date',
render:(text)=>(
<>
<Moment format='YYYY/MM/DD'>{text}</Moment>
</>
)
},
{
title: '',
render:(record)=>(
<>
<Button style={{
marginBottom:"5px"
}} type="primary" ghost>
<Link to={`/clients/update/${record._id}`}>Update</Link>
</Button>
<Button type="primary" style={{
marginBottom:"5px"
}} ghost>
<Link to={`/clients/${record._id}`}>Detail</Link>
</Button>
</>
)
},
];
return loading && clients.length === 0 ? (
<div style={{
position:"absolute",
left:"50%",
top:"50%",
traverse: 'translate(-50%, -50%)'
}}>
<Spin/>
</div>
):
(
<Fragment>
<Table pagination={{ defaultPageSize: 4, pageSizeOptions: ['10', '20', '30']}} columns={columns} dataSource={clients} scroll={{ x: 1300 }}/>
</Fragment>
)
}
const mapStateToProps = state =>{
return {
client:state.client
}
}
export default connect(mapStateToProps,{getClients,deleteClient})(Clients);
***This is my Detail Page and i am Implementing Delete Function function executes perfect and goes to main client but Clients Does not Update on Main Page After Deletion
import React, { Fragment,useEffect,useState } from 'react'
import {connect} from 'react-redux';
import {withRouter,useParams,useHistory,Redirect} from 'react-router-dom';
import {getClient,deleteClient} from '../Redux/actions/clientActions'
import { Card,Spin,Button,Modal } from 'antd';
const gridStyle = {
width: '33%',
textAlign: 'center',
};
const ClientDetail =({client:{client},getClient,deleteClient,loading,history})=> {
let [visible,setVisible] = useState(false)
let {id} = useParams()
useEffect(()=>{
getClient(id)
},[getClient,id])
const handleDelete=()=>{
deleteClient(id)
setVisible(true)
}
const handleOk = () => {
setVisible(false)
history.push('/clients')
};
return loading && client === null? (
<div style={{
position:"absolute",
left:"50%",
top:"50%",
traverse: 'translate(-50%, -50%)'
}}>
<Spin/>
</div>
): (
<Fragment>
<Modal
title="Confirmation Dailog"
visible={visible}
// onOk={handleOk}
footer={[
<Button key="back" onClick={handleOk}>
OK
</Button>,
]}
>
<p>Client Has been Deleted Successfully...</p>
</Modal>
<Card style={{textAlign:"center",
marginTop:"2rem"
}} title="Client Detail">
<Card.Grid style={gridStyle}>CompanyName: {client&&client.companyName}</Card.Grid>
<Card.Grid style={gridStyle}>Type:{client&&client.type}</Card.Grid>
<Card.Grid style={gridStyle}>PriceType:{client&&client.typePrice}</Card.Grid>
<Card.Grid style={gridStyle}>PartitaIva:{client&&client.partitaIva}</Card.Grid>
<Card.Grid style={gridStyle}>CodiceFiscale:{client&&client.codiceFiscale}</Card.Grid>
<Card.Grid style={gridStyle}>Name:{client&&client.name}</Card.Grid>
<Card.Grid style={gridStyle}>SurName:{client&&client.surname}</Card.Grid>
<Card.Grid style={gridStyle}>Address:{client&&client.address}</Card.Grid>
<Card.Grid style={gridStyle}>City:{client&&client.city}</Card.Grid>
<Card.Grid style={gridStyle}>Zip:{client&&client.zip}</Card.Grid>
<Card.Grid style={gridStyle}>Country:{client&&client.country}</Card.Grid>
<Card.Grid style={gridStyle}>Phone:{client&&client.phone}</Card.Grid>
<Card.Grid style={gridStyle}>Email:{client&&client.email}</Card.Grid>
<Card.Grid style={gridStyle}>Domains1:{client&&client.domains[0]}</Card.Grid>
<Card.Grid style={gridStyle}>Domains2:{client&&client.domains[1]}</Card.Grid>
<Card.Grid style={gridStyle}>Domains3:{client&&client.domains[2]}</Card.Grid>
<Card.Grid style={gridStyle}>Notes:{client&&client.notes}</Card.Grid>
<Card.Grid style={gridStyle}>CreatorID:{client&&client.createdByID}</Card.Grid>
<Button type="danger" onClick={handleDelete} style={{ width: '40%',marginTop:"1rem",marginBottom:"1rem"}}>Delete</Button>
</Card>
</Fragment>
)
}
const mapStateToProps=state=>({
client:state.client
})
export default connect(mapStateToProps,{getClient,deleteClient}) (withRouter(ClientDetail));

Answer 1

Here's an example with button and OnClick below that you can use for your work logic. I hope it helps you.
...
const ExampleComponent = props => {
useEffect(()=>{
getClients()
}
,[getClients]);
const handleDelete = () => {
const {asyncDelete, id, history} = props;
asyncDelete({id, onSuccess: () => {
getClients();
// or history.push('/');
}
});
}
return(
<>
...
<button onClick={handleDelete}
...
</>
)
}
const mapDispatchToProps = dispatch => ({
asyncDelete: ({ id, onSuccess }) => dispatch(asyncDelete({ id, onSuccess }))
});
...
Assuming the reudx-thunk and axios in actions.js file
...
export const asyncDelete = ({ id, onSuccess }) => {
return dispatch => {
...
axios
.delete(`/user/${id}`)
.then(response => {
...
onSuccess();
})
.catch(error => console.log(error));
};
};
...
I will pass a onSuccess() method to the async action, when the deletion is done and if the deletion is done correctly, that method will also be executed and the component will be updated again. You can apply this logic to the Nested Routes as well, though there are different ways one of them can be the same logic.