React+Redux鉴权时API未返回就执行初始值判断如何解决？

核心思路是利用你reducer中已经存在的loading状态，在异步请求未完成时跳过判断逻辑，等请求结束状态更新后再执行路由跳转或数据拉取操作，具体修改如下：

1. 先修正reducer的初始状态 #

你当前的reducer初始值为空对象，首次渲染解构出来的loading、isAuthenticated等值都是undefined，容易出现逻辑异常，先给默认初始值：

// 修改初始state
export const userLoadReducer = (state = {
  loading: false,
  isAuthenticated: false,
  userInfo: null
}, 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
  }
}

2. 修改组件内的useEffect逻辑 #

你现在的代码没有主动触发load_user请求，而且没有判断请求状态，修改如下：

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

useEffect(() => {
  // 先触发加载用户信息的异步请求
  dispatch(load_user())
}, [dispatch])

useEffect(() => {
  // 请求还在进行中，直接跳过不执行逻辑
  if (loading) return

  // 请求结束后再做判断
  if (isAuthenticated) {
    dispatch(getUserDetails('profile'))
  } else {
    history.push('/login')
  }
}, [dispatch, history, isAuthenticated, loading, userInfo])

逻辑说明 #

你之前的问题是首次渲染时，请求还没发起，就直接用初始的isAuthenticated: false执行了跳转逻辑。修改后：

• 页面挂载先触发用户信息请求，loading变为true，此时第二个useEffect检测到loading为true，直接跳过逻辑
• 等请求结束，不管成功失败loading都会变为false，同时更新isAuthenticated的真实值，此时第二个useEffect重新触发，用最新的状态执行判断，就不会出现提前跳转的问题了。

内容的提问来源于stack exchange，提问作者Nima