[英]useSelector returns undefined - react-redux
I'm using react-redux
.我正在使用react-redux
。
createSlice
: 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;
my store:我的商店:
import { configureStore } from "@reduxjs/toolkit";
import datatableSlice from "./datatable";
const store = configureStore({
reducer: {
datatable:datatableSlice,
[apiSlice.reducerPath]: apiSlice.reducer,
},
});
export default store;
now I have a parent component called ProductPage
:现在我有一个名为ProductPage
的父组件:
const ProductPage = () => {
const filters = useSelector((state) => state.filters)
useEffect(()=>{
console.log("filters",filters) //always is undefined
},[filters])
I have a child component called Filters
and it used inside ProductPage
component:我有一个名为Filters
的子组件,它在ProductPage
组件中使用:
const ProductPage = () => {
const filters = useSelector((state) => state.filters)
....
return (
..
<Filters paramFilters={productFilters}/>
)
inside of Filters
component I use dispatch:在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 (....
but useSelector
always is undefined.但useSelector
始终未定义。
const ProductPage = () => {
const filters = useSelector((state) => state.filters)
useEffect(()=>{
console.log("filters",filters) //always is undefined
},[filters])
replace state.filters
with the name of the reducer ie, here in your case state.datatable
将state.filters
替换为 reducer 的名称,即在您的情况下state.datatable
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.