如何在Redux的mapDispatchToProps中获取表单用户名值？

嘿，这个需求其实超简单的！你完全不需要把username存入Redux，有两种极简方式可以直接获取到它：

方式一：利用mapDispatchToProps的ownProps参数 #

mapDispatchToProps本身支持第二个参数ownProps，它会自动接收你的表单组件当前的所有props。只要你的表单已经把输入的username作为组件props存在（比如通过受控组件的state维护后传递），就能直接在mapDispatchToProps里读取：

// 你的表单组件，假设已通过受控逻辑维护username的状态
const LoginForm = ({ username, submitForm }) => {
  return (
    <>
      <input 
        type="text" 
        value={username} 
        onChange={(e) => {/* 这里更新username的组件state */}}
      />
      <button onClick={submitForm}>提交</button>
    </>
  );
};

// 重点：通过第二个参数ownProps获取username
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    submitForm: () => {
      // 直接拿到username，无需存入Redux
      const userInput = ownProps.username;
      // 用这个值dispatch你需要的action
      dispatch({ type: 'SUBMIT_FORM', payload: userInput });
    }
  };
};

// connect第一个参数传null，因为不需要映射state到props
export default connect(null, mapDispatchToProps)(LoginForm);

方式二：直接给dispatch函数传参（更灵活） #

如果username是表单组件内部的state，你甚至可以跳过ownProps，直接在调用dispatch函数时把username作为参数传进去：

// 组件内直接传值给submitForm
const LoginForm = ({ username, submitForm }) => {
  return (
    <>
      <input 
        type="text" 
        value={username} 
        onChange={(e) => {/* 更新组件state的username */}}
      />
      <button onClick={() => submitForm(username)}>提交</button>
    </>
  );
};

// mapDispatch里直接接收参数
const mapDispatchToProps = (dispatch) => {
  return {
    submitForm: (username) => {
      // 直接使用传入的username
      dispatch({ type: 'SUBMIT_FORM', payload: username });
    }
  };
};

export default connect(null, mapDispatchToProps)(LoginForm);

这两种方式都完全符合你的需求，不用存储username到Redux，实现起来也最简洁，看你哪种用着顺手就行～

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