Redux State 多次渲染并变为 Undefined 的问题排查与解决

问题分析

正如摘要所述，问题根源在于 setAccuracy reducer 函数的实现方式。原始代码中，setAccuracy reducer 函数只返回了 state.Accuracy - 1，这违反了 Redux Toolkit reducer 函数的编写规范。Redux Toolkit 要求 reducer 函数要么直接修改 state 对象，要么返回一个全新的 state 对象。

具体来说，当 setAccuracy reducer 函数只返回 state.Accuracy - 1 时，Redux 认为这是一个新的 state，但这个 state 只是一个数字，不再是包含 Accuracy, WPM, WPMAverage 属性的对象。因此，后续尝试访问 state.Result.Accuracy 时，就会出现 undefined 的情况，最终导致 NaN 的产生。

解决方案

为了解决这个问题，我们需要修改 setAccuracy reducer 函数，使其符合 Redux Toolkit 的规范。以下提供两种解决方案：

方案一：直接修改 state 对象

这是 Redux Toolkit 推荐的方式，利用 immer.js 库的特性，允许我们像修改普通 JavaScript 对象一样修改 state。

import {createSlice} from "@reduxjs/toolkit"

const ResultSlice = createSlice({
    name:"Result",
    initialState: {
        Accuracy:100,
        WPM:40,
        WPMAverage:[]
    },
    reducers:{
        setAccuracy(state){
            state.Accuracy = state.Accuracy - 1;
        }
    }
})

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

在这个方案中，setAccuracy reducer 函数直接修改了 state.Accuracy 的值，而不需要返回一个新的 state 对象。immer.js 会自动处理 state 的不可变性，确保 Redux 的正常运作。

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

22

查看详情

方案二：返回一个全新的 state 对象

这种方式虽然也能解决问题，但相对来说代码量稍多。

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;

在这个方案中，setAccuracy reducer 函数使用扩展运算符 (...) 创建了一个新的 state 对象，并将 Accuracy 属性的值更新为 state.Accuracy - 1。这样，Redux 就能正确地更新 state。

代码优化建议

除了修正 reducer 函数的错误之外，还可以对代码进行一些优化，以提高代码的可读性和可维护性。

1. useEffect 依赖项: TextBox 组件的 useEffect 中，依赖项 handleChange 每次渲染都会改变，导致 useEffect 每次都会执行，造成不必要的渲染。 应该依赖 Test 和 InputText。

useEffect(() => {
  handleMatch();
}, [Test, InputText]);

2. handleMatch 函数优化: handleMatch 函数中，可以简化条件判断。

function handleMatch() {
  if (Test === InputText) {
    console.log("a complete match");
    dispatch(setValue(""));
    return;
  }

  if (!Test.includes(InputText)) {
    console.log(Accuracy);
    dispatch(setAccuracy());
  }
}

3. 避免在渲染函数中直接访问 state: 在 TextBox 组件中，直接在渲染函数中使用 Accuracy 可能会导致性能问题。可以将 Accuracy 的值存储在一个变量中，并在 useEffect 中更新它。

总结

Redux Toolkit 简化了 Redux 的开发流程，但同时也引入了一些新的概念和规范。理解这些规范对于编写高质量的 Redux 代码至关重要。本文通过一个实际的案例，深入分析了 Redux Toolkit reducer 函数的编写方式，并提供了两种解决方案。希望能够帮助开发者更好地理解和使用 Redux Toolkit，避免类似错误，提升代码质量。

以上就是Redux State 多次渲染并变为 Undefined 的问题排查与解决的详细内容，更多请关注php中文网其它相关文章！