I'm implementing a search functionality by using react and redux thunk. The requirement for this search is to get fetchApi called in the thunk and update the state so we can display. The ui part is like this:
function Search({fetchDataApi}) {
const [data, setData] = useState([])
const [token, setToken] = useState('')
const dataFromState = useSelector(state=>state.newData) || []
const handleSubmit = () => {
fetchDataApi(token) // dispatch new data inside.It get updated by checking getState()
setData(dataFromState)
}
const handleOnChange =(e)=> {
setToken(e.target.value)
}
return (
<div className="App">
<input onChange={handleOnChange}/>
<button onClick={handleSubmit}>Search</button>
{data.map(item=><li>{item}</li>)}
</div>
);
}
export default App;
When I first click the button I got api called and state got update too, but useSelector won't return it in real time, so only empty array set by setData. When I click the button second time, the data shows up. Is it something with the useSelector or other reason to cause this issue? This is the thunk action which I simplify:
const fetchDataApi = async(token, getState, dispatch) => {
...error handle
const response = await api(token)
dispatch(setNewData(response))
...console.log(getState()) // get updated successfully
}
setNewData is a regular action which matches the reducer This is the setNewData:
export const setNewData= (data)= ({
type: 'SET_NEW_DATA'
data
})
I think this post answer my question perfectly. redux state value changed at second click I resolve this issue by using useEffect. Thanks for the checking.
I think the issue is inside your handleSubmit function. You're calling setData when the 'dataFromState' may not be updated yet.
It also looks like that extra local state is unnecessary. I would map over dataFromState instead of keeping an exact copy around. See below:
function Search({fetchDataApi}) {
const [token, setToken] = useState('')
const dataFromState = useSelector(state=>state.newData) || []
const handleSubmit = () => {
fetchDataApi(token) // dispatch new data inside.It get updated by checking getState()
}
const handleOnChange =(e)=> {
setToken(e.target.value)
}
return (
<div className="App">
<input onChange={handleOnChange}/>
<button onClick={handleSubmit}>Search</button>
{dataFromState.map(item=><li>{item}</li>)}
</div>
);
}
export default App;