React Native async await dispatch store

Question

So I want to make a login feature, in here server will validate first if the username or password is correct or not. I'm using store, react - redux.

Here is my code when login button pressed

const [statusLogin,setStatusLogin] = useState(null)
let loginInfo = []

function loginButton(){
    (async () => {
            loginInfo = {username:username,password:password}
            const { status } = await dispatch(getUser(loginInfo))
            if (status==1){
                console.log(status,'in status if 1')
                setStatusLogin('granted')
            }else{
                console.log(status,'in status if else')
                setStatusLogin(null)
            }
    })();
}

Here is my store that suppose to return value 1 or else if it returned value 1 geb statusLogin will changed as granted

export function getUser(body){
    return dispatch =>{
        if (!body){
            setTimeout(() => {
                console.log('no username/pass')
            }, 2000);
        }else{
            setTimeout(() => {
                console.log('username/pass validated returning with value 1')
            }, 2000);
        }
    }
}

help me please

user_1283345 · Answer

This might help

...
function loginButton() {
  (async () => {
    loginInfo = { username: username, password: password };
    await dispatch(getUser(loginInfo, callback));
  })();
}

function callback = (status) => {
  if (status == 1) {
    console.log(status, "in status if 1");
    setStatusLogin("granted");
  } else {
    console.log(status, "in status if else");
    setStatusLogin(null);
  }
};

reducer.js

export function getUser(body, callback){
    return dispatch =>{
        if (!body){
            setTimeout(() => {
                console.log('no username/pass');
                callback(0);
            }, 2000);
        }else{
            setTimeout(() => {
                console.log('username/pass validated returning with value 1')
                callback(1);
            }, 2000);
        }
    }
}

user_12473438 · Answer

you can use like:

usEffect(( )=>{
if(statusLogin) getUser()
},[statusLogin])

Another thing, your function should not passed callback in. Instead of using callback to change the state, you can use dispatch to modify the reducer.

React Native async await dispatch store

2 Answers