Redux Toolkit createSlice 状态更新机制解析
在使用react和redux toolkit构建应用时，开发者可能会遇到状态在多次渲染后变为undefined或nan的问题，尤其是在处理数值类型状态时。这通常是由于对redux toolkit中createslice的reducer函数工作原理理解不当造成的。
以一个打字练习工具为例，其中Result slice管理着Accuracy、WPM等性能指标。当用户输入错误时，Accuracy理应递减。然而，在实际运行中，Accuracy的值在多次更新后却出现了100, 99, 99, undefined, NaN的异常序列。通过控制台日志，可以发现state.Result在某个时刻从一个对象变为了一个数字，随后尝试对一个非数字属性进行数学运算，最终导致NaN。
// 原始的 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;问题的核心在于setAccuracy这个reducer函数。在Redux Toolkit中，createSlice内部集成了Immer.js库，这允许我们在reducer中以“可变”的方式直接修改state对象，而Immer会在底层确保生成一个新的不可变状态。然而，如果reducer函数显式地返回了一个值，那么这个返回值将完全替换当前的整个state。
在上述有问题的代码中，setAccuracy reducer返回的是state.Accuracy - 1，这是一个原始的数字值。这意味着，当setAccuracy被调用时，Result slice的整个状态不再是{ Accuracy: ..., WPM: ..., WPMAverage: ... }这样的对象，而是被替换成了Accuracy的当前值（一个数字）。
例如：
- 初始状态：{ Accuracy: 100, WPM: 40, WPMAverage: [] }
- 第一次调用setAccuracy：state.Accuracy - 1返回99。此时，Result的状态变为99。
- 第二次调用setAccuracy：此时state（即Result的状态）是99。尝试访问state.Accuracy会得到undefined。undefined - 1的结果是NaN。
- 后续操作将基于NaN进行，进一步导致逻辑错误。
正确的createSlice Reducer实现方式
为了避免此类问题，Redux Toolkit的reducer函数有两种正确的实现方式：
1. 直接修改draft状态 (推荐)
这是Redux Toolkit结合Immer.js最推荐的方式。在reducer函数内部，你可以直接对传入的state参数（实际上是Immer生成的草稿draft状态）进行修改，就像它是一个可变对象一样。Immer会在背后处理不可变更新的逻辑。
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;这种方式代码简洁，易于理解，并且符合直观的“修改”操作。
2. 返回一个全新的状态对象
如果你更倾向于传统的不可变更新模式，或者在某些复杂场景下需要完全替换状态，你可以从reducer中返回一个全新的状态对象。在这种情况下，你需要确保返回的是一个包含所有必要属性的完整状态对象。
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;虽然这种方法也能正常工作，但与直接修改draft状态相比，它通常需要更多的代码，并且在Redux Toolkit的上下文中，直接修改draft状态是更惯用且推荐的做法。
组件中的状态消费与调度
在组件中，我们通过useSelector钩子从Redux store中获取状态，并通过useDispatch钩子调度action来更新状态。
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 (
{/* ... 其他 JSX 元素 */}
WPM:
Accuracy: {Accuracy}
{/* 显示 Accuracy */}
Average WPM:
)
}
export default TextBox;在上述组件代码中，useEffect的依赖项也需要注意。将handleChange作为依赖项是不正确的，因为函数在每次渲染时都会重新创建，导致useEffect无限循环或不按预期触发。正确的做法是将handleMatch的逻辑所依赖的状态（如InputText和Test）作为useEffect的依赖项。
总结与最佳实践
- 理解Immer.js在Redux Toolkit中的作用：createSlice利用Immer.js允许你在reducer中“直接修改”状态，但实际上Immer会生成一个新的不可变状态。
-
Reducer的返回行为：
- 如果你直接修改了传入的state参数（即Immer的draft状态），则不需要显式返回任何内容（或者可以返回undefined，Immer会自动处理）。这是最推荐和简洁的方式。
- 如果你显式返回了一个值，这个值将完全替换当前slice的整个状态。因此，如果你的slice状态是一个对象，你必须返回一个完整的对象，而不能只返回其中的一个原始值。
- 避免返回原始值：当你的slice状态是一个复杂对象时，绝不能让reducer返回一个原始值（如数字、字符串、布尔值），除非你确实想将整个slice的状态替换为那个原始值。
- useEffect依赖项：确保useEffect的依赖项是稳定且正确的，避免将会在每次渲染时重新创建的函数作为依赖，这可能导致不必要的重渲染或逻辑错误。
遵循这些原则，可以有效避免Redux Toolkit中常见的状态更新问题，确保应用状态的稳定性和可预测性。
