React-Redux中如何派发Action？删除用户功能点击无响应的问题排查

让我们一步步排查并解决你的问题：

1. 修复用户列表的解构错误（核心问题） #

你的Users组件里有一个明显的解构错误：

const { users } = props.users;

因为mapStateToProps已经把state.users映射到了props.users，所以props.users本身就是你的用户数组。上面的代码相当于尝试从props.users（数组）里解构users属性，这显然不存在，会导致users变量变成undefined——这很可能是点击按钮没反应的关键原因：要么列表没正确渲染，要么user.id根本取不到。

把这行改成：

const { users } = props;
// 或者直接使用 props.users 来遍历

2. 确保getUsers Action被正确派发 #

你在useEffect里直接调用了getUsers()，但getUsers是一个action creator，它只是返回一个action对象，必须通过dispatch才能触发reducer更新状态。你需要把getUsers也添加到mapDispatchToProps里：

const mapDispatchToProps = (dispatch) => {
  return {
    deleteUser: id => dispatch(deleteUser(id)),
    getUsers: () => dispatch(getUsers()) // 新增这一行
  };
};

然后在useEffect里调用props.getUsers()：

useEffect(() => {
  props.getUsers();
}, []);

3. 检查常量一致性 #

确认DELETE_USER常量在action和reducer中是完全一致的，没有拼写错误或者未导入的情况。比如action文件里导出的DELETE_USER，必须和reducer里case DELETE_USER:使用的是同一个常量。

4. 简化mapDispatchToProps（可选优化） #

Redux的connect函数支持直接传入一个包含action creators的对象作为第二个参数，它会自动帮你绑定dispatch，所以你可以把mapDispatchToProps简化成：

const mapDispatchToProps = { deleteUser, getUsers };

这样代码更简洁，也不容易出错。

修复后的完整Users组件示例 #

// 记得导入getUsers action
import { deleteUser, getUsers } from './path-to-your-actions';

const mapStateToProps = (state) => ({ users: state.users });
// 简化后的mapDispatchToProps
const mapDispatchToProps = { deleteUser, getUsers };

const Users = (props) => {
  const { users, getUsers, deleteUser } = props;

  useEffect(() => {
    getUsers();
  }, [getUsers]); // 添加依赖项，符合React Hooks规则

  return (
    <>
      <h2>Users</h2>
      {/* 修复HTML结构，li需要放在ul/ol里 */}
      <ul>
        {users.map((user) => (
          <li key={user.id} className="d-flex justify-content-between align-items-center mb-1">
            {user.name}
            <button onClick={() => deleteUser(user.id)}>x</button>
          </li>
        ))}
      </ul>
    </>
  );
};

export default connect(mapStateToProps, mapDispatchToProps)(Users);

做完这些修改后，点击删除按钮应该就能正常触发reducer更新用户列表了。另外注意给列表项加上key属性，这是React列表渲染的要求，避免警告。

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