Redux Reducer中Loading初始状态是否应设为true？如何处理？

首先直接给结论：loading的初始值不应该总是设为true，除非你的应用在页面初始化时就必须立即发起数据请求，并且需要一开始就展示加载状态。大多数场景下，初始值设为false才是更合理的选择——因为在还没有发起任何请求的时候，页面并没有处于加载状态，一开始就显示加载动画会给用户带来困惑。

接下来分析你遇到的问题：如果初始值设为true，确实需要在每个成功/失败的case里手动把loading设为false，不仅繁琐，还容易遗漏，导致页面一直卡着加载状态。那该怎么优化呢？

优化方案1：合理设置初始值 + 规范action处理 #

把初始状态改成这样：

const initState = { loading: false, data: null, error: null }

然后在reducer里，只有当触发FETCHING action时才把loading设为true，成功或失败时再设为false：

export function global(state=initState, action) {
  switch(action.type){
    case FETCHING: 
      return { ...state, loading: true, error: null }; // 同时清空之前的错误状态
    case FETCH_SUCCESS: 
      return { ...state, data: action.payload, loading: false, error: null };
    case FETCH_FAILED: 
      return { ...state, error: action.payload, loading: false };
    default:
      return state;
  }
}

这样既避免了初始状态的loading错误，每个请求相关的case也只需要处理对应状态即可，逻辑更清晰，也不容易遗漏。

优化方案2：使用Redux Toolkit简化状态管理 #

如果你还在使用传统的Redux写法，强烈建议切换到Redux Toolkit（RTK），它内置了很多工具来简化这类重复的状态逻辑：比如createAsyncThunk可以自动生成请求的pending/fulfilled/rejected action，createSlice可以自动处理immer不可变更新，还能帮你自动管理loading和error状态，省去手动写大量重复代码的麻烦。

举个简单的示例：

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

// 定义异步请求逻辑
export const fetchData = createAsyncThunk(
  'global/fetchData',
  async (params) => {
    const response = await fetch('/api/data');
    return response.json();
  }
);

const globalSlice = createSlice({
  name: 'global',
  initialState: {
    data: null,
    loading: false,
    error: null
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchData.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
      })
      .addCase(fetchData.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  }
});

export default globalSlice.reducer;

这里不需要手动定义FETCHING/FETCH_SUCCESS/FETCH_FAILED这些action类型，RTK会自动帮你生成，loading状态的处理也更清晰，不用担心遗漏设置。

特殊场景：初始需要加载的情况 #

如果你的页面一进来就必须发起请求（比如Dashboard页面，必须加载用户数据才能正常显示），那初始值设为true是合理的，但更推荐的做法是通过组件的useEffect在挂载时触发FETCHING action，而不是依赖初始状态的loading为true——这样逻辑更明确，也方便后续调整加载时机。

总结一下：

• 大多数场景下，loading初始值设为false
• 避免手动重复设置loading状态，可通过Redux Toolkit简化开发
• 只有当页面初始化就需要加载数据时，才考虑将初始值设为true

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