Почему не срабатывает асинхронность?

Question

[Denis1205]

У меня есть форма для входа/регистрации, я хочу что бы если апи возвращает ошибку в форме отображалось сообщение.
Но я не могу разобраться в асинхронностью в редаксе (использую redux-thunk), я добавил

applyMiddleware(thunk), вот мой сабмит хендлер в компоненте формы:

,

const handleSubmit =  (event) => {
        event.preventDefault();

        if (form.login) {
            dispatch(loginUser(form))
        } else {
            dispatch(registerUser(form))
        }

        if(user.error!== null){ // вот этот код не срабатывает с первого раза, в user.error ещё не успело записаться сообщение с ошибкой
            setError(user.error.message); 
        }
    }

action

export const loginUser = (form) => dispatch => {

   return $api.post(API_PATH.authUser, { // axios response
        password: form.password,
        email: form.email
    }).then(res => {
            const { token } = res.data;
            localStorage.setItem('jwtToken', token);
            dispatch({
                type: LOGIN_SUCCESS,
                payload: token
            });
        })
        .catch(err => {
            dispatch({
                type: LOGIN_ERROR,
                payload: err.response.data
            });
        });
};

Что делаю не так?
П.С. я понимаю что проверка идёт раньше чем редьюсер срабатывает, я по этому и спрашиваю, потому что думал что redux-thunk должен решать этот момент, я в комментарии написал как я решил проблему, но мне кажется, это не лучший, подход, поправьте как лучше бы написать

Comments

[Александр]

Скорее всего потому, что у вас проверка if(user.error!== null) выполняется сразу после dispatch, а dispatch является асинхронной функцией и не всегда сразу изменяет state.

Поместите вашу проверку внутрь .then в loginUser

export const loginUser = (form) => dispatch => {
   return $api.post(API_PATH.authUser, { // axios response
        password: form.password,
        email: form.email
    })
    .then(res => {
        const { token } = res.data;
        localStorage.setItem('jwtToken', token);
        dispatch({
            type: LOGIN_SUCCESS,
            payload: token
        });
    })
    .catch(err => {
        dispatch({
            type: LOGIN_ERROR,
            payload: err.response.data
        });
        return err.response.data;
    })
    .then(error => {
        if (error) {
            setError(error.message);
        }
    });
};

[Denis1205]

мою проблему решил useEffect, но мне всё равно кажется что я как то не так делаю

useEffect(() => {
        if (user.error !== null) {
            setError(user.error.message);
        }
    }, [user.error]);

[lexstile]

Denis1205, не очень понял, зачем все это?
Мы диспатчим ошибку в асинхронном экшне - ок.
Ну и выводим ее, где требуется, зачем все эффекты/стейты и т.п.?

Условный код:

const error = useSelector((state) => get(state, 'user.error'));

return (<div>{error && error.text}</div>);

[Denis1205]

lexstile, я догадывался что вообще что то не то делаю, но не понимал что именно)))
Я просто видимо ещё не привык к реакту, спасибо огромное!