javascript - Condition 用初始值检查 Redux state

Question

我尝试从 API 中获取用户信息并检查是否为 isAuthenticated === true 转到配置文件页面，否则转到登录页面，但是由于 JavaScript 不等待响应，它在执行代码之后执行other 并使用与 false 相同的初始化检查条件。

我应该怎么做才能等待 API 的响应并更改 isAuthenticated 和 userInfo 的值，然后检查以下条件？

    const userLoad = useSelector(state => state.userLoad)
    const {error, loading, isAuthenticated, userInfo} = userLoad

    useEffect(() => {
        if (isAuthenticated) {
            dispatch(getUserDetails('profile'))
        } else {
            history.push('/login')
        }
    }, [dispatch, history, isAuthenticated, userInfo])

我创建了一个 userLoadReducer，如下所示：

export const userLoadReducer = (state = {}, action) => {
    const {type, payload} = action;

    switch (type) {

        case USER_LOADED_REQUEST:
            return {
                ...state,
                loading: true
            }

        case USER_LOADED_SUCCESS:
            return {
                ...state,
                loading: false,
                isAuthenticated: true,
                userInfo: payload.user,
            }

        case USER_LOADED_FAIL:
            return {
                ...state,
                loading: false,
                isAuthenticated: false,
                userInfo: null
            }

        default:
            return state
    }
}

而它的load_user动作如下：

export const load_user = () => async dispatch => {
    const config = {
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
    };

    try {
        dispatch({type: USER_LOADED_REQUEST});

        const response = await axios.get(`/auth/user/`, config);

        if (response.status === 200) {
            dispatch({
                type: USER_LOADED_SUCCESS,
                payload: response.data
            });
        } else {
            dispatch({
                type: USER_LOADED_FAIL
            });
        }

    } catch (err) {
        dispatch({
            type: USER_LOADED_FAIL
        });
    }
};

检查：console.log()

| Order    | Result
| -------- | ---------------------------------------------------- |
| First    | {loading: false, isAuthenticated: false, userInfo: null} |                       
| Second   | {loading: true, isAuthenticated: false, userInfo: null} |
| third    | {loading: false, isAuthenticated: true, userInfo: {…}} |                             

标签： javascriptreactjsreact-redux