React project using-CodePudding

I'm building UI using React, where I am using redux for increment & decrement function. Unfortunately my increment and decrement buttons are not working, may be this issue is coming due to some logical error. I will be very grateful if anyone help me to solve this issue. Here I am posting my source code.

 **Creating Redux store code**


import {createStore} from 'redux';

const initialState ={counter:0, showCounter: true};

const counterReducer = (state =initialState,action) => {
    if (action.type === 'increament') {
    
    state.counter  ;
       return {counter: state.counter   1,
        showCounter: state.showCounter
    };
}

if (action.type === 'increase')  return{
    counter: state.counter   action.amount,
}

if ( action.type ==='decrement'){
    return {
        counter: state.counter - 1,
    };
}

if (action.type === 'toggle'){
    return{
        showCounter: !state.showCounter,
        counter: state.counter
    };
}
return state;

};

const store = createStore(counterReducer);

export default store;

**Counte.js code**

import {useDispatch, useSelector} from 'react-redux';

import classes from './Counter.module.css';

const Counter = () => {
  const dispatch = useDispatch();
const counter = useSelector(state => state.counter);
const show = useSelector(state => state.showCounter);

const increamentHandler = () => {
  dispatch({type:'increamennt', amount:10});
};

const increaseHandler = () => {
dispatch({type:'decrement'});
};

const decrementHandler = () =>{
  dispatch({type:'decreamennt'});
};

  const toggleCounterHandler = () => {
    dispatch({type:'toggle'})
  };

  return (
    <main className={classes.counter}>
      <h1>Redux Counter</h1>
      {show && <div className={classes.value}>{counter}</div>}
      <div>
      <button onClick={increamentHandler}>Increament</button>
      <button onClick={increaseHandler}>Increase by 10</button>
      <button onClick={decrementHandler}>Decrement</button>
      </div>
      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </main>
  );
};

export default Counter;

CodePudding user response：

Check this :

const counterReducer = (state =initialState,action) => {
    if (action.type === 'increment') {
        return {counter: state.counter   1, showCounter: state.showCounter};
    }
    if (action.type === 'increase') {
        return {counter: state.counter   action.amount, showCounter: state.showCounter};
    }
    if ( action.type ==='decrement'){
        return {counter: state.counter - 1, showCounter: state.showCounter};
    }
    if (action.type === 'toggle'){
        return {showCounter: !state.showCounter, counter: state.counter};
    }
    return state;
};

const increamentHandler = () => {
  dispatch({type:'increment', amount:10});
};

const increaseHandler = () => {
dispatch({type:'increase'});
};

const decrementHandler = () =>{
  dispatch({type:'decrement'});
};

CodePudding user response：

I hope this code can help you:

const counterReducer = (state = initialState, action) => {
    if (action.type === 'increment') {
        return {
            ...state,
            counter: state.counter   1
        };
    }
    if (action.type === 'increase') {
        return {
            ...state,
            counter: state.counter   action.amount
        };
    }
    if (action.type === 'decrement') {
        return {
            ...state,
            counter: state.counter - 1
        };
    }
    if (action.type === 'toggle') {
        return {
            ...state,
            showCounter: !state.showCounter
        };
    }
    return state;
};

After that, you should check the typo in the type of dispatch. decreamennt and increamennt.

Try this code:

const increamentHandler = () => {
    dispatch({ type: 'increment', amount: 10 });
};

const increaseHandler = () => {
    dispatch({ type: 'increase' });
};

const decrementHandler = () => {
    dispatch({ type: 'decrement' });
};

const toggleCounterHandler = () => {
    dispatch({ type: 'toggle' });
};