本文旨在帮助开发者理解并解决在使用 Redux 的 combineReducers 时遇到的状态嵌套问题。通过分析问题代码，明确 combineReducers 的工作原理，并提供正确的 Reducer 实现方式，避免不必要的对象嵌套，确保状态管理的正确性。
理解 combineReducers 的工作原理
combineReducers 是 Redux 提供的一个工具函数，用于将多个 Reducer 合并成一个根 Reducer。它的作用是将传入的每个 Reducer 函数与一个特定的 state key 关联起来。这意味着每个 Reducer 只负责管理全局 state 中的一部分。
当 action 被 dispatch 时，combineReducers 会将 action 传递给所有的 Reducer，每个 Reducer 根据 action 的类型来更新它所负责的那部分 state。最后，combineReducers 将所有 Reducer 返回的 state 合并成一个大的 state 对象，作为新的全局 state。
状态嵌套问题的原因分析
状态嵌套问题通常发生在使用 combineReducers 时，错误地将 Reducer 返回的 state 封装在一个对象中。例如，如果一个 Reducer 负责管理 heroPosX，它应该直接返回 heroPosX 的新值，而不是返回一个包含 heroPosX 属性的对象。
问题代码中，Reducer 的实现方式如下：
import { initialState } from "./initialState";
export function heroPosX(state = initialState, action) {
switch (action.type) {
case "MOVE_X":
return { ...state, heroPosX: state.heroPosX + 10 };
default:
return state;
}
}
export function heroPosY(state = initialState, action) {
switch (action.type) {
case "MOVE_Y":
return { ...state, heroPosY: state.heroPosY + 10 };
default:
return state;
}
}这段代码的问题在于，它返回的是一个包含 heroPosX 属性的对象，而不是 heroPosX 的值。combineReducers 已经创建了顶层 key，Reducer 应该直接返回对应 key 的值。
解决方案
要解决状态嵌套问题，需要修改 Reducer 的实现方式，直接返回状态值，而不是包含状态值的对象。同时，确保 initialState 是一个基本数据类型的值，而不是对象。
修改后的 Reducer 代码如下：
import { initialState } from "./initialState";
export function heroPosX(state = initialState, action) {
switch (action.type) {
case "MOVE_X":
return state + 10;
default:
return state;
}
}
export function heroPosY(state = initialState, action) {
switch (action.type) {
case "MOVE_Y":
return state + 10;
default:
return state;
}
}在这个修改后的代码中，heroPosX 和 heroPosY Reducer 直接返回新的状态值，而不是一个对象。这样，combineReducers 就可以正确地将这些状态值合并到全局 state 中，避免了状态嵌套问题。
同时，需要确保 initialState 的值是一个数字，例如 0：
export const initialState = 0;
总结
在使用 Redux 的 combineReducers 时，需要注意 Reducer 的实现方式。Reducer 应该直接返回它所负责的状态值，而不是包含状态值的对象。同时，确保 initialState 的值是一个基本数据类型的值。通过理解 combineReducers 的工作原理，并遵循正确的 Reducer 实现方式，可以避免状态嵌套问题，确保状态管理的正确性。
