useSelector 返回 undefined - react-redux

Question

我正在使用react-redux 。

createSlice ：

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

const datatableSlice = createSlice({
    name: "datatable",
    initialState: {
        filters: [],
        columns: [],
    },
    reducers: {
        selectedFilters: (state,action) => {
            state.filters = action.payload;
        },
        selectedColumns: (state,action) => {
            state.columns = action.payload;
        },
    },
});

export const {
    selectedFilters,
    selectedColumns,
} = datatableSlice.actions;
export default datatableSlice.reducer;

我的商店：

import { configureStore } from "@reduxjs/toolkit";
import datatableSlice from "./datatable";

const store = configureStore({
    reducer: {
        datatable:datatableSlice,
        [apiSlice.reducerPath]: apiSlice.reducer,
    },
});

export default store;

現在我有一個名為ProductPage的父組件：

const ProductPage = () => {
    const filters = useSelector((state) => state.filters)
    useEffect(()=>{
        console.log("filters",filters) //always is undefined
    },[filters])

我有一個名為Filters的子組件，它在ProductPage組件中使用：

const ProductPage = () => {
    const filters = useSelector((state) => state.filters)
....
return (
..
<Filters paramFilters={productFilters}/>
)

在Filters組件內部我使用調度：

const Filters = (params) => {

    
    const dispatch = useDispatch();
    const [filters, setFilters] = useState(params.paramFilters);
    useEffect(() => {
        const initFilters = getLocalStorage(SELECTED_FILTERS);
        if (initFilters) {
            setFilters(initFilters);
            dispatch(selectedFilters(initFilters));
            
        }else{
            dispatch(selectedFilters(filters));
        }
    }, []);


    /**
     * To show or hide filters selected
     * @param {*} column_id id of each row
     * @param {*} show !show or row
     */
    const handleFilterCheckboxChange = (filter_id, show) => {
        const tmpFilts = filters.map((el) =>
            el.id === filter_id ? { ...el, show } : el
        );
        setFilters(tmpFilts);
        setLocalStorage(SELECTED_FILTERS, tmpFilts);
        dispatch(selectedFilters(tmpFilts));
    };



    return (....

但useSelector始終未定義。

Answer 1

const ProductPage = () => {
    const filters = useSelector((state) => state.filters)
    useEffect(()=>{
        console.log("filters",filters) //always is undefined
    },[filters])

將state.filters替換為 reducer 的名稱，即在您的情況下state.datatable