React+Redux问题：dispatch动作后wordParts属性为何返回undefined？

我帮你排查了这个问题，核心原因大概率是你的Redux reducer在处理动作时没有正确保留原有状态的属性，导致更新后wordParts或者stem被覆盖成undefined了。下面是具体的解决步骤和修正方案：

1. 修复Reducer的状态更新逻辑 #

Redux reducer必须返回完整的状态对象，如果只返回修改的部分，会丢失未修改的属性（比如处理REPLACE_STEM时只返回stem，就会丢失wordParts）。

错误示例（导致undefined的原因）： #

function wordReducer(state = initialState, action) {
  switch(action.type) {
    case 'REPLACE_STEM':
      // 只返回stem，丢失了wordParts
      return { stem: action.payload }; 
    case 'ADD_SUFFIX':
      // 只返回wordParts，丢失了stem
      return { wordParts: [...state.wordParts, action.payload] }; 
    default:
      return state;
  }
}

正确写法（使用对象展开运算符保留原有属性）： #

// 定义初始状态
const initialState = {
  wordParts: [],
  stem: '' // 测试用初始字符串
};

function wordReducer(state = initialState, action) {
  switch(action.type) {
    case 'REPLACE_STEM':
      return {
        ...state, // 保留原有的wordParts属性
        stem: action.payload // 更新stem
      };
    case 'ADD_SUFFIX':
      return {
        ...state, // 保留原有的stem属性
        wordParts: [...state.wordParts, action.payload] // 添加新的后缀到数组
      };
    default:
      return state;
  }
}

2. 确认mapStateToProps的映射正确性 #

确保你从store的word节点下正确提取属性：

const mapStateToProps = (state) => {
  return {
    wordParts: state.word.wordParts,
    stem: state.word.stem
  };
};

3. 检查Action Creators的正确性 #

确保动作创建函数正确传递了payload：

// replaceStem动作
export const replaceStem = (stem) => ({
  type: 'REPLACE_STEM',
  payload: stem
});

// addSuffix动作
export const addSuffix = (suffix) => ({
  type: 'ADD_SUFFIX',
  payload: suffix
});

4. 确认组件的Connect配置 #

确保组件正确连接Redux，把dispatch和状态映射到props：

import { connect } from 'react-redux';
import { replaceStem, addSuffix } from './actions';

class Word extends React.Component {
  // 组件逻辑，比如调用this.props.replaceStem(newStem)或者this.props.addSuffix(newSuffix)
}

export default connect(mapStateToProps, { replaceStem, addSuffix })(Word);

完成以上修改后，dispatch动作时就不会出现wordParts或stem为undefined的情况了——因为每次状态更新都完整保留了未修改的属性，只更新需要改变的部分。

内容的提问来源于stack exchange，提问作者Gal Grünfeld