use async await in handleSubmit react redux-toolkit - reactjs

Question

I have a final form in a react page that i need to show me a global success if all the data have been sotored in their database.
I have two partial forms (variations and generalInfo) that store the data in two tables in sql.
I use this handlesubmit from last step in the form to store this data.
const handleSubmit = (e) => {
e.preventDefault();
dispatch(setDesignResponse(dataResponse));
dispatch(createNewVariations(variations));
dispatch(createNewJsonResponse(newJsonResponse));
};
i have my slices that return me info if the store is succesfully.
export const createNewJsonResponse = createAsyncThunk (
"new-json-response/post",
async (newData) => {
const { accesToken, newDataResponse } = newData;
const res = await FaqsService.createNewResponse(newDataResponse, accesToken);
return res.data;
}
);
export const createNewVariations = createAsyncThunk (
"new-variations/post",
async (variations) => {
try {
console.log(variations);
const { token, variationsData } = variations;
const res = await FaqsService.createNewVariations(variationsData, token);
console.log(res.data);
alert('VARIACIONES CREADAS PERFECTAMENTE');
return res.data;
} catch(error) { console.log(error);}
}
);
If just i have one call to one api i know how to show and alert to inform the user. Like in the above code (createNewVariations).
But i need to check if both are ok, and then show the alert to the user.
I think that i can do something in the component, in the handlesubmit, to send the info to the slices, store the data in the data bases, return de result succesfuly (with an state that return a true or false from slices (with extrarducer like:
extraReducers: {
[createNewJsonResponse.fulfilled]:(state, action) => {
state.isCreated = action.payload.message; // initial state is: isCreated:false
}
}
// (the same for the other slice).
),
and then pop-up the alert.
Is it possible?
thanks

Answer 1

Yes you can have isCreated in both of the state slices and then have if condition on your compoment which show success alert when both of the isCreated Flag is 1
I have create a Github example for this I am using a counter example,
from # Redux + Plain JS template
npx create-react-app my-app --template redux
and modified the code to demo that how you can achieve it.
You would need to look on the src/feature/counter/Counter.js File
There I have below logic, this is the not full code of the component, you can look that in the Github repo. and yes you can have isCreated on multiple slices and have if condition on the component, that will work for which you are looking for.
export function Counter() {
const count = useSelector(selectCount);
const incrementStatus = useSelector(incrementCountStatus);
const incrementStatusNew = useSelector(incrementCountStatusNew);
const dispatch = useDispatch();
const [incrementAmount, setIncrementAmount] = useState('2');
console.log(`Increment Status:`, incrementStatus);
console.log(`Increment Status New:`, incrementStatusNew);
const incrementValue = Number(incrementAmount) || 0;
const handleAsyncSubmit = () => {
dispatch(incrementByAmount(incrementValue))
dispatch(incrementAsyncNew(incrementValue))
}
if (incrementStatus === 'success' && incrementStatusNew === 'success') {
alert('Data have been saved successfully.');
}
GitHub Repo