Retrieve Redux Toolkit dispatch as function

Question

I'm rather new to RTK an am currently struggeling with a problem.

In my application I prepared a function to filter my data with three input parameters "unfilteredList", "listOfFilters" and "setFilteredList". For each filter in my listOfFilters I want to apply the filter on my unfilteredList and then store the filtered data by using the setFilteredList. This works fine using useStates.

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

    
    const [variantData, setVariantData] = useState([])
    const [filteredTableData, setFilteredTableData] = useState([])
    const [listOfFilter, setListOfFilter] = useState({})
    
    return (
        <TableContainer>
            <Table stickyHeader aria-label="sticky table">
                <TableHeader
                    
                    filterButtonAction={() => filterButtonAction(
                        variantData,
                        listOfFilter,
                        setFilteredVariantData,
                    )}
                    
                    listOfFilters={listOfFilter}
                    setListOfFilters={setListOfFilter}

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

export function filterButtonAction(unfilteredData, listOfFilters, setFilteredData) {
    const filterdDataList = [];

    unfilteredData.forEach((cureEntry) => {
        let keep = true;
        Object.values(listOfFilters).forEach((curFilter) => {
            
            /////////////////////////////////
            //// PSEUDO FILTER IMPLEMENTATION
            if (filteredOut) {
                keep = flase
            }
        });

        if (keep) {
            filterdDataList.push(cureEntry);
        }
    });
    setFilteredData(filterdDataList);
}

But I moved the variantMap from being a useState to Redux since this is my main data which I need allover my app.

My corresponding slice

import { createSlice } from "@reduxjs/toolkit";


const fullVariantMapSlice = createSlice({
    name: 'fullVariantMap',
    initialState: {
        variantMap: [],
        filteredVariantMap: []
    },
    reducers: {
        setFullVariantMap: (state, action) => {
            state.variantMap = action.payload
        },
        setFilteredVariantMap: (state, action) => {
            state.filteredVariantMap = action.payload
        },
    }
})

export const { setFullVariantMap, setFilteredVariantMap } = fullVariantMapSlice.actions
export default fullVariantMapSlice.reducer

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}

                    filterButtonAction={() => filterButtonAction(
                        variantData,
                        listOfFilter,
                        dispatch(setFilteredVariantMap),
                    )}

                    listOfFilters={listOfFilter}
                    setListOfFilters={setListOfFilter}

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

Now I have the issue, that I can't pass the "setFilterdPatientList" anymore, since this is part of my slice and I can only use it using dispatch(setFilteredPatientList()). But since the filterButtonAction() is part of a reusable component I want be able to pass the function for setting the data as a function.

Is there a way to retrieve the function from the slice in a way, that I can pass it to my filter function in order to execute it there?

Thanks in advance

Answer 1

Ok, I asked this question after googleing for probably 2 hours. Now I accidentally stumbled upon the ansewer while working on other parts of my code. The answer is rather simple. Instead of trying to pass the "dispatch(setFilteredData)" I created a new function which I could pass.

const setFilteredData = (data) => {
        dispatch(setFilteredVariantData(data))
}

This way it workes fine. Only that my Component does not re-render, but thats something else I can google.