如何将Redux Toolkit的dispatch操作以函数形式传递给通用过滤函数

嗨，我来帮你解决这个问题！你遇到的核心矛盾是：原来通用的filterButtonAction函数期望接收一个直接接收数据的回调函数（比如useState生成的setter），但Redux的dispatch(setFilteredVariantMap)是立刻触发了action，并非一个等待接收数据的函数。我们只需要做一层简单的包装就能完美适配，同时保留过滤函数的通用性。

解决方案：在组件中包装dispatch操作 #

你不需要修改filterButtonAction的任何代码，只需要在传递回调给它的时候，把dispatch操作包装成一个符合要求的函数：

export function VariantTable(props) {
    const {showFilterColumns} = props

    const variantData = useSelector((state) => state.fullVariantMap.variantMap)
    const dispatch = useDispatch()
    const [listOfFilter, setListOfFilter] = useState({})
    
    return (
        <TableContainer>
            <Table stickyHeader aria-label="sticky table">
                <TableHeader
                    orderDirection={orderDirection}

                    // 重点：把dispatch包装成接收数据的回调函数
                    filterButtonAction={() => filterButtonAction(
                        variantData,
                        listOfFilter,
                        (filteredResult) => dispatch(setFilteredVariantMap(filteredResult))
                    )}

                    listOfFilters={listOfFilter}
                    setListOfFilters={setListOfFilter}

                />
            </Table>
        </TableContainer>
    );
}

这样filterButtonAction里调用setFilteredData(filterdDataList)的时候，就会自动触发Redux的dispatch，把过滤后的数据更新到store中。

为什么原来的方式不行？ #

你之前直接传dispatch(setFilteredVariantMap)的时候，其实是立刻执行了setFilteredVariantMap()创建了一个空的action对象，然后把这个对象传给了dispatch，而不是传递一个可以后续接收数据的函数。所以过滤函数拿到的不是能接收数据的回调，而是dispatch执行后的返回值（通常是action对象），自然无法正确更新数据。

可选优化：将过滤逻辑整合到Redux Thunk（不推荐，除非放弃通用性） #

如果你不再需要这个过滤函数复用在useState场景中，也可以把过滤逻辑放到Redux的thunk里，让逻辑更贴合Redux生态：

// 在你的slice文件中添加thunk
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

export const filterVariantMap = createAsyncThunk(
  'fullVariantMap/filter',
  (params, { dispatch }) => {
    const { unfilteredData, listOfFilters } = params;
    const filteredDataList = [];

    unfilteredData.forEach((cureEntry) => {
        let keep = true;
        Object.values(listOfFilters).forEach((curFilter) => {
            // 你的过滤逻辑
            if (/* filteredOut条件 */) {
                keep = false;
            }
        });
        if (keep) {
            filteredDataList.push(cureEntry);
        }
    });
    dispatch(setFilteredVariantMap(filteredDataList));
  }
)

// 组件中调用方式
filterButtonAction={() => dispatch(filterVariantMap({
  unfilteredData: variantData,
  listOfFilters: listOfFilter
}))}

不过这种方式会让过滤逻辑和Redux绑定，失去了原本的通用性，所以还是第一种包装方案更适合你的需求。

备注：内容来源于stack exchange，提问作者Anselm