React/Redux: How to async or something else? - reactjs

Question

Hello Everyone,
need your help today with filtering in Redux...
I have filter (you can see on a picture) with several inputs (filters) for my search.
In order to receive Fleet information (filter) I need to pass an "ID" form Client...
const clientChange = (event) => {
const client = event.target.value;
const client_id = client.id;
dispatch({ type: "CLIENT_LIST_SELECTION", payload: client_id });
getFleetFilter();
};
That's my function clientChange in Form.js
const client_id = useSelector((state) => state.client.selection);
const getFleetFilter = async () => {
dispatch({ type: "FLEET_LIST_REQUEST" });
try {
let res = await getFleet(token, client_id);
let data = res.data.data
dispatch({ type: "FLEET_LIST_LOAD", payload: data });
} catch (err) {
if (err) {
console.log("Error Fleet Data");
console.log(err);
};
};
};
That's my function getFleetFilter in Search.js
Problem: I have undefined client_id in API string, because, function getFleetFilter getting called quicker, than client_id getting stored in Redux!
Question: How can I avoid this keeping using Redux here ?
Thank you!

Answer 1

You can use the useEffect callback for this like so:
const client_id = useSelector((state) => state.client.selection);
useEffect(() => {
if (client_id) {
getFleetFilter();
}
}, [client_id]);
const clientChange = (event) => {
const client = event.target.value;
const client_id = client.id;
dispatch({ type: "CLIENT_LIST_SELECTION", payload: client_id });
};
const getFleetFilter = async () => {
dispatch({ type: "FLEET_LIST_REQUEST" });
try {
let res = await getFleet(token, client_id);
let data = res.data.data
dispatch({ type: "FLEET_LIST_LOAD", payload: data });
} catch (err) {
if (err) {
console.log("Error Fleet Data");
console.log(err);
};
};
};