Redux问题：AddTodos组件调用store中todos始终为undefined求助

嘿，我帮你拆解下这个Redux的问题——你遇到的情况其实很典型：直接访问组件里的todos是undefined，但用this.props.store.getState()能拿到正确状态，核心原因是你没通过Redux的connect高阶组件把store中的todos状态映射到组件的props中，相当于绕开了Redux给组件注入状态的标准流程。

下面我给你梳理常见的错误点和对应的修正方案：

1. 最可能的问题：未使用connect或mapStateToProps配置错误 #

Redux不会自动把store的状态塞到组件props里，必须通过connect配合mapStateToProps函数来完成状态映射。如果你的AddTodos组件没做这一步，或者mapStateToProps里没正确返回todos，就会出现你说的情况。

错误示例（没用到connect） #

class AddTodos extends React.Component {
  componentDidMount() {
    // 这里this.props.todos根本不存在，所以是undefined
    console.log(this.props.todos); 
    // 但直接调用store.getState是绕开了映射，直接拿原始状态，所以能拿到
    console.log(this.props.store.getState().todos);
  }
}

// 直接导出组件，没经过connect处理
export default AddTodos;

修正方案：用connect把状态映射到props #

import { connect } from 'react-redux';
import { ADD_TODO } from '../Variables/Variables';

class AddTodos extends React.Component {
  componentDidMount() {
    // 现在this.props.todos就能拿到store里的状态了
    console.log(this.props.todos);
  }

  // 你的添加todo逻辑示例
  handleAddTodo = (text) => {
    // connect会自动把dispatch注入props，直接用就行
    this.props.dispatch({ type: ADD_TODO, payload: text });
  }

  render() {
    // ...你的组件渲染代码
  }
}

// 这个函数负责把store的状态映射到组件props
const mapStateToProps = (state) => {
  return {
    todos: state.todos // 注意！这里要和你的reducer里定义的状态key完全对应
  };
};

// 用connect包裹组件后再导出，这一步是关键
export default connect(mapStateToProps)(AddTodos);

2. 另一个可能：reducer中的状态key不匹配 #

如果你的根reducer里把todo状态存在了别的key下（比如todoList而不是todos），那mapStateToProps里的state.todos自然会是undefined。举个例子：

错误的reducer配置示例 #

// 单个todo reducer
function todoReducer(state = [], action) {
  switch(action.type) {
    case ADD_TODO:
      return [...state, action.payload];
    default:
      return state;
  }
}

// 合并reducer时用了todoList作为key
const rootReducer = combineReducers({
  todoList: todoReducer
});

那你就得把mapStateToProps改成对应的key：

const mapStateToProps = (state) => {
  return {
    todos: state.todoList // 和根reducer里的key保持一致
  };
};

3. 额外提醒：尽量别直接操作store #

虽然this.props.store.getState()能拿到状态，但这不是Redux推荐的用法。通过connect映射状态的好处是：当store里的todos更新时，组件会自动重新渲染；而直接调用getState的话，你得手动监听store变化，反而增加了复杂度。

内容的提问来源于stack exchange，提问作者Max Wolfen