Redux Toolkit中extraReducers的action.payload无法获取深层值

问题描述 #

使用Redux Toolkit时，action.payload存在值，但访问其嵌套属性（如message或list）时返回undefined。页面中直接使用response能正常显示，但message或response.message无法展示。相关代码如下：

Slice 代码 #

interface ListMakerResponse {
  result: number;
  detail: string;
  message: string;
  list: Maker[];
}

interface ListMakerRequest {
  dynamic: string;
}

type Maker = {
  makerId: string;
  makerName: string;
};

type OrganazationState = {
  status: "idle" | "loading" | "succeeded" | "failed";
  error: Error | null;
  response: ListMakerResponse;
};

const initialState: OrganazationState = {
  status: "idle",
  error: null,
  response: {} as ListMakerResponse,
};

export const postMakerList = createAsyncThunk(
  "list_maker",
  async (_, { rejectWithValue }) => {
    const response = await http.usePost<ListMakerResponse, ListMakerRequest>(
      "http://localhost:8080/list_maker",
      {
        dynamic: "gravity",
      }
    );
    return response.data;
  }
);

export const OrganazationSlice = createSlice({
  name: "organazation",
  initialState,
  reducers: {},
  extraReducers(builder) {
    builder.addCase(postMakerList.fulfilled, (state, action) => {
      const { message } = action.payload;

      console.log("successed", message);
      state.response = action.payload;
      state.status = "succeeded";
    });
    builder.addCase(postMakerList.rejected, (state, action) => {
      console.log("failed");
      state.status = "failed";
    });
  },
});

export const responseSelect = (state: RootState) => state.organazation.response;

export const messageSelect = createSelector(
  responseSelect,
  (res) => res.message
);

export default OrganazationSlice.reducer;

组件代码 #

const dispatch = useAppDispatch();

const response = useAppSelector(responseSelect);
const message = useAppSelector(messageSelect);

useEffect(() => {
  dispatch(postMakerList());
}, []);

解决方案 #

1. 修复初始状态的类型与值不匹配问题 #

你在初始状态中将空对象{}断言为ListMakerResponse，TypeScript会认为response已经具备所有接口属性，但运行时这些属性实际不存在，导致初始阶段访问response.message得到undefined，还可能影响selector的缓存逻辑。

可以选择两种修复方式：

• 方式一：将response改为Partial类型

  type OrganazationState = {
    status: "idle" | "loading" | "succeeded" | "failed";
    error: Error | null;
    response: Partial<ListMakerResponse>; // 允许属性可选
  };
  
  const initialState: OrganazationState = {
    status: "idle",
    error: null,
    response: {}, // 无需断言
  };
  

• 方式二：设置符合接口的初始值

  const initialState: OrganazationState = {
    status: "idle",
    error: null,
    response: {
      result: 0,
      detail: "",
      message: "",
      list: []
    },
  };
  

2. 验证API响应结构是否匹配 #

确认后端返回的response.data结构和ListMakerResponse完全一致，比如是否存在嵌套层级错误（比如后端返回{ data: { message: 'xxx' } }而非直接返回{ message: 'xxx' }）。可以在postMakerList中打印完整响应数据：

export const postMakerList = createAsyncThunk(
  "list_maker",
  async (_, { rejectWithValue }) => {
    const response = await http.usePost<ListMakerResponse, ListMakerRequest>(
      "http://localhost:8080/list_maker",
      { dynamic: "gravity" }
    );
    console.log("API完整响应", response.data); // 检查结构是否匹配
    return response.data;
  }
);

3. 组件中添加状态判断 #

在展示message前，先判断请求状态是否为succeeded，避免在初始或加载阶段访问不存在的属性：

const status = useAppSelector(state => state.organazation.status);

return (
  <div>
    {status === "succeeded" ? (
      <p>{message}</p>
    ) : status === "loading" ? (
      <p>加载中...</p>
    ) : null}
  </div>
);

4. 强制更新state.response的引用 #

如果API返回的对象引用和初始状态的空对象存在缓存混淆，可以在fulfilled回调中解构创建新对象，确保Redux能检测到状态变化：

builder.addCase(postMakerList.fulfilled, (state, action) => {
  console.log("successed", action.payload.message);
  state.response = {...action.payload}; // 解构生成新对象
  state.status = "succeeded";
});

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