reactjsreact-hooksreact-reduxreduceredux-reducers

React Redux: undefined reducer action


I made increment & decrement counter buttons, I'm using redux to trigger actions of increment and decrement but Im getting "Counter.js:11 Uncaught TypeError: Cannot read properties of undefined (reading 'addition')" error by clicking the button.

Here is the code:-
store.js

const counterSlice = createSlice({
    name: "counter",
    initialState: {
        countNumber: 0,
        countToggle: true,
    },
    reducers: {
        addition(state) {
            state.countNumber++;
        },
        subtraction(state) {
            state.countReducer--;
        },          
    },
});
const store = configureStore({
    reducer: counterSlice.reducer,
})

export const storeAction = store.actions;

export default store;

Counter.js

import { useDispatch, useSelector } from "react-redux";
import { storeAction } from "../redux-store/store";

const counter = useSelector((state) => state.countNumber);
    
const dispatch = useDispatch();

const addHandler = () => {
    dispatch(storeAction.addition());
};

//jsx
<div className={classes.value}>{counter}</div>
<button onClick={addHandler}>addition</button>

Solution

  • Shouldn't it be?

    export const storeAction = counterSlice.actions