Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

339
Visualizações
useSelector returns undefined - react-redux

I'm using 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;

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:

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:

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

inside of Filters component I use 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 (....

but useSelector always is undefined.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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 i.e., here in your case state.datatable

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda