useSelector returns 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 组件内部我使用 dispatch:

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 替换为减速器的名称，即在您的情况下 state.datatable

useSelector returns undefined - react-redux

useSelector returns undefined - react-redux

javascript

reactjs

redux

react-redux