Redux Toolkit中createSlice状态更新的常见陷阱与解决方案

// 原始的 Result slice 代码 (存在问题)
import {createSlice} from "@reduxjs/toolkit"

const ResultSlice = createSlice({
    name:"Result",
    initialState: {
        Accuracy:100,
        WPM:40,
        WPMAverage:[]
    },
    reducers:{
        setAccuracy(state,action){
            // 问题所在：reducer直接返回了一个原始值
            return state.Accuracy-1;
        }
    }
})

export const ResultReducer = ResultSlice.reducer;
export const {setAccuracy} = ResultSlice.actions;

import {createSlice} from "@reduxjs/toolkit"

const ResultSlice = createSlice({
    name:"Result",
    initialState: {
        Accuracy:100,
        WPM:40,
        WPMAverage:[]
    },
    reducers:{
        setAccuracy(state) { // action参数如果未使用可以省略
            // 直接修改 state 对象的属性
            state.Accuracy = state.Accuracy - 1;
        }
    }
})

export const ResultReducer = ResultSlice.reducer;
export const {setAccuracy} = ResultSlice.actions;

import {createSlice} from "@reduxjs/toolkit"

const ResultSlice = createSlice({
    name:"Result",
    initialState: {
        Accuracy:100,
        WPM:40,
        WPMAverage:[]
    },
    reducers:{
        setAccuracy(state) {
            // 返回一个新的状态对象，确保包含所有必要的属性
            return {
                ...state, // 展开现有状态，保留其他属性
                Accuracy: state.Accuracy - 1
            };
        }
    }
})

export const ResultReducer = ResultSlice.reducer;
export const {setAccuracy} = ResultSlice.actions;

import React, { useEffect } from 'react';
import { useDispatch,useSelector } from 'react-redux';
import { setValue,setAccuracy } from '../store'; // 导入正确的 action creator

const TextBox = () => {
  // ... 其他 useSelector 钩子

  const Accuracy = useSelector((state)=>{
    console.log(state.Result); // 观察 state.Result 的变化
    return  state.Result.Accuracy;
  })

  const dispatch = useDispatch();

  const handleChange=(e)=>{
      dispatch(setValue(e.target.value));
  }

  useEffect(()=>{
    // 注意：将 handleChange 作为依赖项是不稳定的，因为它会在每次渲染时重新创建。
    // 更好的做法是将 handleMatch 逻辑放在 useEffect 内部，并将其依赖项设为 InputText 和 Test。
    handleMatch();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  },[InputText, Test]) // 修正依赖项，确保在输入或测试文本变化时触发匹配逻辑

  function handleMatch(){
    if(Test === InputText){
      console.log( "a complete match");
        dispatch(setValue(""));
        return;
     } 
     if(Test.includes(InputText)){
      console.log("good going");
      return;
     }
     else{
      console.log("Current Accuracy:", Accuracy); // 修正日志输出
      dispatch(setAccuracy()); // 调度 action
      return;
     }
  }

  return (
    <div className='TextBox'>
        {/* ... 其他 JSX 元素 */}
        <div className='performance'>
          <h4 className='Tags'>WPM:</h4>
          <h4 className='Tags'>Accuracy: {Accuracy}</h4> {/* 显示 Accuracy */}
          <h4 className='Tags'>Average WPM:</h4>
        </div>
    </div>
  )
}

export default TextBox;