React+Redux计数器增减按钮失效问题求助（附源码）

我用React构建UI，通过Redux实现计数器的增减功能，但目前增减按钮无法正常工作，推测是逻辑错误导致，相关源码如下：

Redux Store代码 #

import {createStore} from 'redux';

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

const counterReducer = (state =initialState,action) => {
    if (action.type === 'increment') {
    
    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;

Counter.js代码 #

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 incrementHandler = () => {
  dispatch({type:'incremennt', amount:10});
};

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

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

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

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

export default Counter;

问题点梳理 #

• 拼写错误：Counter.js中incrementHandler和decrementHandler分发的action type分别写成了'incremennt'和'decremennt'，与reducer中定义的'increment'、'decrement'不匹配，导致reducer无法识别对应action
• 事件与action不匹配：increaseHandler分发的是'decrement'类型，和按钮“Increase by 10”的功能完全相反，且未传递amount参数
• Reducer状态修改违规：increment分支中直接修改了原state对象（state.counter++），违反Redux状态不可变原则，同时返回时又额外加1，导致实际计数加2
• 状态字段丢失：increase和decrement分支返回的新对象未包含showCounter字段，会导致该状态在更新时丢失

修复后的代码 #

Redux Store代码

import { createStore } from 'redux';

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

const counterReducer = (state = initialState, action) => {
  if (action.type === 'increment') {
    // 不修改原state，直接返回新状态对象
    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;
};

const store = createStore(counterReducer);

export default store;

Counter.js代码

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 incrementHandler = () => {
    dispatch({ type: 'increment' });
  };

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

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

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

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

export default Counter;

内容的提问来源于stack exchange，提问作者Er. JK SAHOO