Redux中useSelector无法获取state子属性，父对象正常问题求助

核心问题 #

你的filtersSlice初始化状态结构错误，导致Redux实际的state层级和预期不符：

• 在combineReducers中，filters字段绑定到了filtersReducer，意味着filtersReducer管理的是state.filters这一层状态，而非包含filters的外层对象。
• 但你给filtersSlice的initialState定义成了RootState结构（外层嵌套filters），最终实际state结构变成state.filters.filters.departureTimeRange，组件中尝试获取state.filters.departureTimeRange自然返回undefined。

修复步骤 #

1. 修正filtersSlice的初始化状态与reducer逻辑

将initialState改为直接使用FiltersState结构，同时修改reducers中的状态更新路径：

interface FiltersState {
  priceRange: [number, number];
  departureTimeRange: [number, number];
  seatLayout: string;
  busCompanies: string[];
  services: string[];
  destination: string[];
  departure: string[];
}

// RootState定义保持不变
export interface RootState {
  filters: FiltersState;
}

// 修正initialState为FiltersState类型，去掉外层filters包裹
const initialState: FiltersState = {
  priceRange: [0, 1000],
  departureTimeRange: [0, 24],
  seatLayout: '',
  busCompanies: [],
  services: [],
  destination: [],
  departure: [],
};

const filtersSlice = createSlice({
  name: 'filters',
  initialState,
  reducers: {
    setDepartureTimeRange(state, action: PayloadAction<FiltersState['departureTimeRange']>) {
      // 直接修改state的departureTimeRange，无需嵌套filters
      state.departureTimeRange = action.payload;
    },
    // 其他reducers也同步修改路径，比如setPriceRange等
  }
});

export const { setDepartureTimeRange } = filtersSlice.actions;
export default filtersSlice.reducer;

2. 验证组件中的useSelector逻辑

组件中的useSelector无需修改，现在state.filters.departureTimeRange对应正确的层级：

const departureTimeRange = useSelector((state: RootState) => state.filters.departureTimeRange);

3. 确认rootReducer结构

你的rootReducer定义正确，无需修改：

const rootReducer = combineReducers({
  seats: seatsReducer,
  selectedSeats: selectedSeatsReducer,
  filters: filtersReducer
});

export default rootReducer;

额外建议 #

• 用Redux DevTools查看实际state结构，可快速定位层级错误问题。
• 定义slice时，确保每个slice的state对应combineReducers中分配的层级，避免嵌套错误。

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