TypeError: Object(...) is not a function problem with event handler

Viewed 202

I am trying to change the value of a state defined in the store using redux. I defined Slice, store and component according to react redux doc, however, when I trigger the event I obtain the error:

"object(...) is not a function"

This is the slice definition

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

export const sliceCambiadorDeVista = createSlice({
    name:"cambiadorDeVista",
    initialState:{
        value:30,
    },
    reducers:{
        cambiarVista:(state, action)=>{
            state.value = action.payload
        }
    }
})

export const cambiarVista = sliceCambiadorDeVista.actions;
export const vistaActual = (state) => state.cambiadorDeVista.value;

export default sliceCambiadorDeVista.reducer;

This is the store definition

import {configureStore} from "@reduxjs/toolkit"
import cambiadorDeVistaReducer from "../redux/actions/SwitchSections/switchSections"

export default configureStore({
    reducer:{
        cambiadorDeVista:cambiadorDeVistaReducer,
    }
})

and this is a part of the component definition.

import * as React from 'react';
import Box from '@mui/material/Box';
import { ThemeProvider } from '@emotion/react';
import theme from "../themeConfig"
import { ListItem, ListItemText, ListSubheader } from '@mui/material';

import AddCircleIcon from "@mui/icons-material/AddCircle"
import WbSunnyIcon from '@mui/icons-material/WbSunny';
import OtherHousesIcon from '@mui/icons-material/OtherHouses';
import ElectricalServicesIcon from '@mui/icons-material/ElectricalServices';


import { ListItemIcon , List} from '@mui/material';
import { makeStyles } from '@mui/styles';
import { useDispatch, useSelector } from 'react-redux';
import { cambiarVista, vistaActual } from '../redux/actions/SwitchSections/switchSections';


const LeftAside = () => {
  
    const dispatch = useDispatch()
    const vistaActualState = useSelector(vistaActual)
    const changeVistaHandler = ()=>{
        dispatch(()=>cambiarVista(3))
    }
  return (
    <ThemeProvider theme = {theme}>
            <Box sx={{display:{xs:"none",md:"flex"}}}>
                <List 
                    sx={{display:{xs:"none",md:"flex"}, width:"100%", bgcolor:"secondary",flexDirection:"column", borderRight:1}} 
                    subheader ={<ListSubheader>Etapas {vistaActualState}</ListSubheader>}
                >
                    <ListItem>
                        <ListItemIcon>
                            <AddCircleIcon />
                        </ListItemIcon>
                        <ListItemText id="section-basic-data-label" 
                            primary = "Datos Basicos" 
                            disableTypography ="true" 
                            className={classes.textAsideItems}
                            onClick={changeVistaHandler}
                            />
                    </ListItem>

Error is generated inside of event handler changeVistaHandler. Problem seens to be related to reducer parameter.

0 Answers
Related