如何在 Redux Toolkit 中正确实现通知列表的过滤功能-js教程-PHP中文网

如何在 Redux Toolkit 中正确实现通知列表的过滤功能

本文介绍在 redux toolkit 中过滤数据的两种推荐方式：使用派生状态（selector）避免直接修改原始数据，或在必要时将过滤结果单独存入 state，确保数据源完整性与可预测性。

本文介绍在 redux toolkit 中过滤数据的两种推荐方式：使用派生状态（selector）避免直接修改原始数据，或在必要时将过滤结果单独存入 state，确保数据源完整性与可预测性。

在 Redux 应用中，直接修改 state.notices 数组来实现过滤是一种反模式。这会破坏原始数据的完整性，导致无法恢复全量列表、影响缓存一致性、干扰时间旅行调试，并可能引发 UI 同步问题（例如多个组件依赖不同过滤视图时相互覆盖）。正确的做法是将“过滤”视为一种派生计算，而非状态变更。

✅ 推荐方案一：使用 selector 计算过滤结果（推荐）

这是最符合 Redux 原则的方式——保持 notices 为唯一真实数据源，将搜索条件（searchOption 和 searchValue）作为独立状态字段，再通过 selector 动态计算出当前匹配的通知列表。

// noticesSlice.ts
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  notices: [] as Notice[], // 假设 Notice 类型已定义
  searchOption: "Simple" as "Simple" | "Advanced",
  searchValue: "",
};

export const noticesSlice = createSlice({
  name: "notices",
  initialState,
  reducers: {
    setSearch: (state, action) => {
      const { searchOption, search } = action.payload;
      state.searchOption = searchOption;
      state.searchValue = search?.toLowerCase() ?? "";
    },
    resetSearch: (state) => {
      state.searchOption = "Simple";
      state.searchValue = "";
    },
  },
  extraReducers: (builder) => {
    builder.addCase(getNotices.fulfilled, (state, { payload }) => {
      state.notices = payload;
    });
  },
});

export const { setSearch, resetSearch } = noticesSlice.actions;
export default noticesSlice.reducer;

接着定义一个 memoized selector（推荐配合 createSelector 提升性能）：

// selectors.ts
import { createSelector } from "@reduxjs/toolkit";
import type { RootState } from "./store"; // 根据你的 store 路径调整

export const selectNoticesState = (state: RootState) => state.notices;

export const selectFilteredNotices = createSelector(
  selectNoticesState,
  (noticesState) => {
    const { notices, searchOption, searchValue } = noticesState;

    if (!searchValue.trim()) return notices;

    return notices.filter((note) => {
      const value = searchValue;
      switch (searchOption) {
        case "Simple":
          return note.title.toLowerCase().includes(value);
        case "Advanced":
          return (
            note.description.toLowerCase().includes(value) ||
            note.tags.some((tag) => tag.toLowerCase().includes(value))
          );
        default:
          return true;
      }
    });
  }
);

在组件中使用：

import { useSelector, useDispatch } from "react-redux";
import { setSearch } from "./noticesSlice";
import { selectFilteredNotices } from "./selectors";

function NoticesList() {
  const dispatch = useDispatch();
  const filteredNotices = useSelector(selectFilteredNotices);

  const handleSearch = (searchOption: string, search: string) => {
    dispatch(setSearch({ searchOption, search }));
  };

  return (
    <div>
      <searchbar onsearch="{handleSearch}"></searchbar><ul>
        {filteredNotices.map((note) => (
          <li key="{note.id}">{note.title}</li>
        ))}
      </ul>
</div>
  );
}

✅ 优势：

原始 notices 永远不变，便于复位、分页、导出等操作；
selector 自动 memoize，仅当依赖项变化时重新计算；
符合 Redux “state 是只读的”核心原则。

⚠️ 方案二：显式维护 filteredNotices 字段（仅限特殊需求）

仅当你需要持久化过滤结果（如服务端分页+前端二次过滤、离线缓存过滤态等），才考虑在 state 中新增字段：

const initialState = {
  notices: [] as Notice[],
  filteredNotices: [] as Notice[], // 显式存储过滤结果
};

// 在 reducers 中：
filterNotices: (state, action) => {
  const { searchOption, search } = action.payload;
  const value = search?.toLowerCase() ?? "";

  if (!value.trim()) {
    state.filteredNotices = [];
    return;
  }

  if (searchOption === "Simple") {
    state.filteredNotices = state.notices.filter(
      (n) => n.title.toLowerCase().includes(value)
    );
  } else if (searchOption === "Advanced") {
    state.filteredNotices = state.notices.filter(
      (n) =>
        n.description.toLowerCase().includes(value) ||
        n.tags.some((t) => t.toLowerCase().includes(value))
    );
  }
},

⚠️ 注意事项：