I am trying to put a condition on my button with the help of my redux state, the code is as follows
{showotpbox == true ? (
<IonItem>
<IonLabel position="stacked">OTP</IonLabel>
<IonInput
type="number"
onIonChange={(e) => handleChangeOtp(String(e.detail.value))}
/>
</IonItem>
) : (
""
)}
where showotpbox is a react hook state, which initally is set to false, now after clicking a button that says "GET OTP" i dispatch an action
let data = { email };
await dispatch(requestOTP(data));
which then after succes dispatch a type that changes state of a reducer
export const requestOTP = (data: any) => (dispatch: any) => {
console.log('requesting')
dispatch({ type: "LOADING", payload: true });
console.log(data);
axios
.post("http://localhost:4000/request_otp", data)
.then((res) => {
console.log(res)
if (res.data.status == 200) {
dispatch({type:'SHOW_OTP_BOX'})
}
})
.catch((err) => {
dispatch({ type: "LOADING", payload: false });
dispatch(errorActions());
});
};
which in turn updates a state in my modal reducer
case 'SHOW_OTP_BOX':
return {...state,showotpbox:true}
but i see that action is somehow async cause when i look at this function
const modal = useSelector((state: RootState) => {
return {show: state.modal.showotpbox };
});
const getotp = async () => {
let data = { email };
await dispatch(requestOTP(data));
console.log(modal.show);
if (modal.show == true) {
setshowotpbox(true);
}
};
"console.log(modal.show);" still gives me false, although the state has been update to true and that's why my input box doesn't render
i try to use async await here in my getotp
function to wait for the action to be completed but that doesn't work it seems
modal.modal.showotpbox
, where does it come from, and what is supposedly updating it? – Drew Reesemodal
from the render cycle the action was dispatched encloses a "copy" ofmodal
for the life of that function execution, it won't update in the middle of the function. Is the expected behavior tosetshowotpbox(true);
whenmodal.show
becomestrue
? Have you tried anuseEffect
for this "reactive" effect? – Drew Reese