redux action creator sets value only from second time

Viewed 38

I have an action-creator which sends get-request and sets a user:

export const login = (email: string, password: string) => {
    return async (dispatch: Dispatch<UserAction>) => {
        try {
            dispatch({type: UserActionTypes.FETCH_USER})
            const response = await axios.get<IUser>('http://localhost:8080/users/login', {
                params: {
                    email,
                    password
                }
            })
            dispatch({type: UserActionTypes.FETCH_USER_SUCCESS, payload: response.data})
        }catch (e) {
            dispatch({
                type: UserActionTypes.FETCH_USER_ERROR,
                payload: 'Произошла ошибка при загрузке пользователя'
            })
        }
    }
}

And in this method i use this action-creator

    const logIn = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        e.preventDefault()

        login(email.value, password.value)

        console.log(user)
    }

But when i put on the button first, I get null in logs, when i put second time, i get my object:

{id: 1, name: 'Matvey', email: 'matvey@gmail.com', phone: '375255198474', password: 'matvey', …}

But if i make button which will show me user, and click first time to log in, i get in logs null, but when i click to the button to show user, i get my user. What's the problem?

1 Answers
  1. At the time logIn is called, the variable user that is binded is null, what your action is going to update is the state in your store and not the local variable
  2. Your login action is asynchronous so the user won't be available right after the call to login
Related