在Redux状态中同时使用hasFetched与isFetching标记是否可行？

先给你吃颗定心丸：你的实现没问题！ #

你现在用isFetching跟踪请求是否在进行中，hasFetched标记请求是否完成（不管成功失败），再通过isStateReady判断状态是否就绪的逻辑，非常严谨，完全可以在全应用中使用。

之前没加hasFetched时，初始状态isFetching是false，会被误判为“状态就绪”，导致请求还没完成就跳转登录页——现在加了hasFetched，只有当请求彻底结束（成功/失败）后，才会进入后续的登录判断或页面渲染，完美解决了提前跳转的问题，这是异步状态管理中很经典的思路。

其他常见的实现模式 #

如果你想让代码更简洁、更符合现代Redux最佳实践，这些模式可以参考：

1. 使用Redux Toolkit简化异步状态管理 #

Redux官方现在主推Redux Toolkit（RTK），它内置的createAsyncThunk和createSlice可以自动处理异步请求的pending/fulfilled/rejected状态，省去手动编写action type和重复reducer逻辑的麻烦：

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

// 定义异步action，自动生成pending/fulfilled/rejected类型
export const fetchUser = createAsyncThunk(
  'user/fetchUser',
  async () => {
    const response = await yourApiCallToCheckLogin(); // 替换成你的API请求
    return response.data;
  }
);

const userSlice = createSlice({
  name: 'user',
  initialState: {
    userInfo: null,
    error: null,
    isFetching: false,
    hasFetched: false
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.isFetching = true;
        state.hasFetched = false;
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.isFetching = false;
        state.hasFetched = true;
        state.userInfo = action.payload;
        state.error = null;
      })
      .addCase(fetchUser.rejected, (state, action) => {
        state.isFetching = false;
        state.hasFetched = true;
        state.error = action.error.message;
      });
  }
});

export default userSlice.reducer;

2. 封装自定义Hook统一状态判断 #

把isStateReady这类判断逻辑封装到自定义Hook里，避免在多个组件中重复写相同的判断：

import { useSelector } from 'react-redux';

export const useUserAuthStatus = () => {
  const { isFetching, hasFetched, userInfo, error } = useSelector(state => state.user);
  
  const isStateReady = !isFetching && hasFetched;
  const isLoggedIn = isStateReady && userInfo?.isAuthenticated; // 根据你的API返回字段调整

  return {
    isFetching,
    hasFetched,
    isStateReady,
    isLoggedIn,
    error
  };
};

在组件里直接用这个Hook，代码会清爽很多：

const { isFetching, isStateReady, isLoggedIn } = useUserAuthStatus();

if (isFetching) return <LoadingComponent />;
if (!isStateReady) return null;

return isLoggedIn ? <Dashboard /> : <Navigate to="/login" />;

3. 路由守卫组件集中处理跳转逻辑 #

如果是React项目，可以用路由守卫（基于React Router）把登录状态检查和跳转逻辑集中起来，不用在每个需要权限的组件里重复写判断：

import { Navigate } from 'react-router-dom';
import { useUserAuthStatus } from '../hooks/useUserAuthStatus';
import LoadingSpinner from './LoadingSpinner';

const ProtectedRoute = ({ children }) => {
  const { isFetching, isStateReady, isLoggedIn } = useUserAuthStatus();

  // 请求中显示加载组件
  if (isFetching) {
    return <LoadingSpinner />;
  }

  // 状态未就绪时等待
  if (!isStateReady) {
    return null;
  }

  // 已登录则渲染目标组件，否则跳转到登录页
  return isLoggedIn ? children : <Navigate to="/login" />;
};

在路由配置里直接使用这个组件：

<Routes>
  <Route path="/login" element={<LoginPage />} />
  <Route path="/dashboard" element={
    <ProtectedRoute>
      <DashboardPage />
    </ProtectedRoute>
  } />
</Routes>

总结 #

你的原始实现逻辑清晰、严谨，完全可以在全应用中落地。如果想要减少样板代码、提升开发效率，Redux Toolkit是非常好的选择；而自定义Hook和路由守卫则能帮你更好地组织代码，减少重复逻辑，让组件更专注于UI渲染。

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