React组件中订阅Redux的FETCH_FAILED Action实现咨询

嘿，作为Redux和React新手，你现在的方向其实已经走对了一大半！咱们一步步来梳理和优化你的实现，让错误处理更完善，同时贴合Redux的最佳实践。

首先，先优化你的Async Thunk #

你当前的fetchFailed action没有携带错误信息，这会导致后续组件无法获取状态码等关键信息。咱们把错误对象传递进去：

export const fetchData = () => { 
  return async (dispatch, getState) => { 
    const appState = getState(); 
    const { uid } = appState.appReducer; 
    await dispatch(fetchRequested()); 
    try { 
      const response = await LookupApiFactory().fetch({ uid });
      // 注意：如果用原生fetch API，需要手动检查响应是否成功
      if (!response.ok) {
        const error = new Error('请求失败');
        error.status = response.status; // 把状态码挂载到error对象上
        throw error;
      }
      const data = await response.json(); // 按需解析响应数据
      dispatch(fetchSucceeded(data)); 
      return data; 
    } catch (error) { 
      dispatch(fetchFailed(error)); // 把错误对象传给action
      return error; 
    } 
  } 
}

然后，让Reducer保存错误状态 #

你需要在reducer里专门维护一个error字段，用来存储失败时的错误信息，这样组件才能通过Redux状态获取到错误详情：

const initialState = {
  data: null,
  isLoading: false,
  error: null // 新增：存储错误对象
};

export const appReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_REQUESTED':
      return { ...state, isLoading: true, error: null }; // 请求开始时清空错误
    case 'FETCH_SUCCEEDED':
      return { ...state, isLoading: false, data: action.payload };
    case 'FETCH_FAILED':
      return { ...state, isLoading: false, error: action.payload }; // 保存错误对象
    default:
      return state;
  }
};

最后，组件中根据错误状态码展示对应信息 #

用useSelector从Redux状态中取出错误，然后根据状态码分支处理提示内容：

import { useSelector, useDispatch } from 'react-redux';
import { useEffect } from 'react';
import { fetchData } from './path-to-your-thunk';

function YourComponent() {
  const dispatch = useDispatch();
  const { isLoading, data, error } = useSelector(state => state.appReducer);

  // 组件挂载时触发数据请求
  useEffect(() => {
    dispatch(fetchData());
  }, [dispatch]);

  // 根据错误状态码生成对应提示
  let errorMessage = null;
  if (error) {
    switch (error.status) {
      case 401:
        errorMessage = '你没有访问权限，请登录后重试';
        break;
      case 404:
        errorMessage = '请求的资源不存在';
        break;
      default:
        errorMessage = `请求出错：${error.message || '未知错误'}`;
    }
  }

  return (
    <div className="data-container">
      {isLoading && <p>加载中...</p>}
      {error && <p className="error-text">{errorMessage}</p>}
      {data && (
        <div className="data-content">
          {/* 这里渲染你的数据内容 */}
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

额外推荐：用Redux Toolkit简化开发 #

作为新手，我强烈建议你试试Redux Toolkit（Redux官方推荐的工具集），它能帮你省去大量样板代码，自动生成action类型和reducer逻辑：

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

// 用createAsyncThunk自动生成pending/fulfilled/rejected action
export const fetchData = createAsyncThunk(
  'data/fetchData',
  async (_, { getState }) => {
    const { uid } = getState().appReducer;
    const response = await LookupApiFactory().fetch({ uid });
    if (!response.ok) {
      const error = new Error('请求失败');
      error.status = response.status;
      throw error;
    }
    return await response.json();
  }
);

// 用createSlice创建reducer和action
const dataSlice = createSlice({
  name: 'data',
  initialState: {
    data: null,
    isLoading: false,
    error: null
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchData.pending, (state) => {
        state.isLoading = true;
        state.error = null;
      })
      .addCase(fetchData.fulfilled, (state, action) => {
        state.isLoading = false;
        state.data = action.payload;
      })
      .addCase(fetchData.rejected, (state, action) => {
        state.isLoading = false;
        state.error = action.error; // 直接获取抛出的错误对象
      });
  }
});

export default dataSlice.reducer;

总结 #

你的初始思路完全没问题——通过async thunk分发不同状态的action，再让组件订阅状态来处理UI逻辑。核心优化点就是把错误信息传递到Redux状态中，这样组件才能拿到状态码等关键数据来展示对应提示。如果用Redux Toolkit，整个流程会更简洁，也更不容易出错。

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