Redux中派发单个动作时出现状态参数重复的问题

嘿，我一眼就瞅出你遇到的问题根源了：你的两个reducer都用了完整的initialState作为默认状态，而且每个reducer处理时都返回了整个应用状态的拷贝，这就导致combineReducers合并后，每个reducer对应的state键下面都包含了完整的初始状态数据，自然就出现了重复。

问题拆解 #

Redux的combineReducers核心逻辑是：每个reducer只负责管理state中对应键的那部分数据，而非整个应用的state。比如你用combineReducers({ countReducer, updateNavigation })，那countReducer的state参数只是state.countReducer这部分，updateNavigation的state参数只是state.updateNavigation这部分。但你现在给两个reducer的默认值都是完整的initialState，所以每个reducer初始化时都持有{count:0, navigation:{}}，合并后每个键下面自然都带着这两个字段。

修复步骤 #

我们需要拆分初始状态，让每个reducer只管好自己的那部分数据，同时调整reducer逻辑：

1. 修改reducers.js文件

• 拆分初始状态，每个reducer只持有自己负责的字段
• 重命名updateNavigation reducer（避免和action创建函数同名，减少混淆）
• 每个reducer只处理自己的状态，不需要展开整个state（combineReducers会自动帮我们合并）

修改后的代码：

import { COUNTER_CHANGE, UPDATE_NAVIGATION } from "../constants";
import logger from "redux-logger";

// 拆分初始状态，每个reducer对应自己的专属部分
const countInitialState = { count: 0 };
const navigationInitialState = { navigation: {} };

export const countReducer = (state = countInitialState, action) => {
  switch (action.type) {
    case COUNTER_CHANGE:
      return {
        ...state,
        count: action.payload,
      };
    default:
      return state;
  }
};

// 重命名reducer，避免和action函数同名引发混淆
export const navigationReducer = (state = navigationInitialState, action) => {
  switch (action.type) {
    case UPDATE_NAVIGATION:
      return {
        ...state,
        navigation: action.payload,
      };
    default:
      return state;
  }
};

2. 修改reducer/index.js文件

更新combineReducers中的reducer名称，和上面的修改对应上：

import { countReducer, navigationReducer } from "../reducers/countReducer";
import { combineReducers } from "redux";

const allReducers = combineReducers({
  countReducer,
  navigationReducer // 这里改成新的reducer名称
});

export default allReducers;

3. 确认dispatch部分代码

你的mapDispatchToProps写法没问题，不需要修改——action创建函数updateNavigation的名称和reducer的重命名不冲突。

修复后的预期状态 #

现在当你派发updateNavigation动作后，Redux的state会变成：

{
  countReducer: { count: 0 },
  navigationReducer: { navigation: /* 你传入的navigation对象 */ }
}

完全符合你的预期，不会再出现重复字段啦。

内容的提问来源于stack exchange，提问作者Shreya B