如何在 Redux Toolkit 中动态加载外部 API 数据填充搜索过滤器-js教程-PHP中文网

如何在 Redux Toolkit 中动态加载外部 API 数据填充搜索过滤器

本文介绍如何使用 redux toolkit query（rtk query）替代硬编码的过滤器数据，通过调用外部 api 动态获取分类、职位类型等搜索条件，并安全、响应式地同步到 redux 状态中。

本文介绍如何使用 redux toolkit query（rtk query）替代硬编码的过滤器数据，通过调用外部 api 动态获取分类、职位类型等搜索条件，并安全、响应式地同步到 redux 状态中。

在构建 React + Redux 的搜索功能时，将过滤器选项（如 category、jobTypeList、datePost 等）写死在 initialState 中虽便于快速开发，但缺乏灵活性与可维护性。真实场景中，这些选项往往由后端统一管理（例如支持多语言、动态增删、权限控制），需通过 API 按需加载。Redux Toolkit Query（RTK Query）正是为此类数据获取与缓存场景而生的官方推荐方案——它不仅简化异步逻辑，还能自动集成请求生命周期、缓存、错误处理，并无缝更新 Redux 状态。

✅ 正确做法：用 RTK Query 加载并注入过滤器数据

1. 定义 API Slice（推荐路径：src/store/api.js）

// src/store/api.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://your-api.com/v1/' }),
  endpoints: (builder) => ({
    // 获取分类列表（如 Residential / Commercial）
    fetchCategories: builder.query({
      query: () => 'categories',
      // 可选：添加 transformResponse 统一格式
      transformResponse: (response) => 
        response?.data?.map((item, idx) => ({
          id: item.id || idx + 1,
          name: item.name || 'Unknown',
          value: item.slug || item.value || String(item.id),
        })) || [],
    }),
    // 同理可定义其他过滤器端点
    fetchJobTypes: builder.query({
      query: () => 'job-types',
      transformResponse: (response) =>
        response?.data?.map((item, idx) => ({
          id: item.id || idx + 1,
          name: item.title,
          value: item.key,
          isChecked: false,
        })) || [],
    }),
  }),
});

export const { useFetchCategoriesQuery, useFetchJobTypesQuery } = api;

? 提示：transformResponse 可确保 API 返回结构与前端组件预期一致（例如补全 isChecked: false），避免运行时错误。

codex-orchestration
一款AI工具，主要用于Codex 通用编排：利用 `update_plan` 与后台 PTY 终端并行运行 `codex exec` 工作进程，适合需要提升相关任务效率的用户。

下载

2. 配置 Store 并注入 API Reducer

// src/store/store.js
import { configureStore } from '@reduxjs/toolkit';
import { api } from './api';
import jobReducer from './jobSlice'; // 你原有的 slice

export const store = configureStore({
  reducer: {
    job: jobReducer,
    [api.reducerPath]: api.reducer, // 必须注册
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware), // 必须添加 middleware
});

3. 在 Slice 中响应 API 成功响应（关键步骤）

修改你的 jobSlice.js，在 createSlice 中添加 extraReducers，监听 RTK Query 的 fulfilled action：

// src/store/jobSlice.js
import { createSlice } from '@reduxjs/toolkit';
import { api } from './api';

const initialState = {
  latestJob: [],
  category: [], // ← 初始化为空数组，由 API 填充
  jobTypeList: [],
  datePost: [],
  experienceLavel: [],
  tags: [],
};

export const jobSlice = createSlice({
  name: 'job',
  initialState,
  reducers: {
    // 保留你原有的同步 reducer（addLatestJob, jobTypeCheck 等）
    addLatestJob: (state, { payload }) => {
      const isExist = state.latestJob.includes(payload);
      if (isExist) {
        state.latestJob = state.latestJob.filter((item) => item !== payload);
      } else {
        state.latestJob.push(payload);
      }
    },
    // ... 其他 reducers（略）
  },
  // ? 新增：响应 API 请求成功
  extraReducers: (builder) => {
    builder
      .addMatcher(
        api.endpoints.fetchCategories.matchFulfilled,
        (state, { payload }) => {
          state.category = payload; // ✅ 直接覆盖 category 字段
        }
      )
      .addMatcher(
        api.endpoints.fetchJobTypes.matchFulfilled,
        (state, { payload }) => {
          state.jobTypeList = payload; // ✅ 自动带 isChecked: false
        }
      );
    // 可继续添加其他端点匹配逻辑
  },
});

export const {
  addLatestJob,
  clearJobTypeToggle,
  jobTypeCheck,
  // ... 其他 actions
} = jobSlice.actions;

export default jobSlice.reducer;

4. 在组件中触发请求（无需手动 dispatch）

// src/components/SearchFilters.tsx
import { useFetchCategoriesQuery, useFetchJobTypesQuery } from '../store/api';

export default function SearchFilters() {
  const { data: categories, isLoading: catLoading } = useFetchCategoriesQuery();
  const { data: jobTypes, isLoading: typeLoading } = useFetchJobTypesQuery();

  if (catLoading || typeLoading) return <div>Loading filters...</div>;

  return (
    <div classname="filters">
      <h3>Category</h3>
      {categories?.map((cat) => (
        <label key="{cat.id}">
          <input type="checkbox" onchange="{()"> {/* 触发 jobTypeCheck action */}}
            checked={/* 从 state.jobTypeList 读取 */}
          />
          {cat.name}
        </label>
      ))}
      {/* 其他过滤器渲染逻辑... */}
    </div>
  );
}