Not dispatching an action on Routing in react - reactjs

Question

I have a component called OneUser , i have input field and button , on clicking that button i will fetch the new title from API and route to new page ,title will be shown in that component called Display.
What is happening now is , on clicking of submit button , routing is happening , but API call is not working .
Please suggest the appropriate answer for me
State logic is working fine , so i didnt posted here.
App.js
import React from 'react';
import './App.css';
import OneUser from './Components/OneUser';
import Display from './Components/Display';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import store from './store'
import {Provider} from 'react-redux'
function App() {
const isAuthenticated = true
return (
<Provider store={store}>
<Router>
<div className="App">
<Switch>
<Route path='/' exact component={OneUser}/>
<Route path='/post' exact component={Display}/>
</Switch>
</div>
</Router>
</Provider>
);
}
export default App;
OneUser.js
import React , {useState, useEffect} from 'react'
import {oneFetchData} from '../redux/oneAction'
import {connect} from 'react-redux'
function OneUser({user,oneFetchData, history}) {
const [id,setId] = useState(1)
const [IdFromButton,setIdFromButton] = useState(1)
const submit = () => {
setIdFromButton(id);
history.push("/post")
}
useEffect( () =>{
oneFetchData(id)
},[IdFromButton]
)
return(
<div>
<input type="text" value={id} onChange={e=> setId(e.target.value)}>
</input>
< button onClick={submit}>Fetch Post</button>
</div>
)
}
const gettingValue = state => {
return{
user: state.data
}
}
const callingAction = dispatch => {
return{
oneFetchData: (id)=>
dispatch(oneFetchData(id))
console.log('dispatched') // not dispatching here function
}
}
Display.js
import React from 'react'
import {useSelector} from 'react-redux'
function Display({history}) {
const user = useSelector( state => state.data)
return (
<div>
<h1>
Title from another component - {user.title}
</h1>
</div>
)
}
export default Display

Answer 1

I think your component may be unmounted before the state changes. To fix that, you should call history.push after IdFromButton has changed.
const [id,setId] = useState(1)
const [IdFromButton,setIdFromButton] = useState(1)
const submit = () => {
setIdFromButton(id);
}
useEffect( () =>{
oneFetchData(id)
history.push("/post")
},[IdFromButton]
)