使用此类Redux Form无状态组件是否可行？是否需转为有状态组件？

Absolutely—using a stateless (functional) component for your Redux Form setup is not just feasible, it’s actually a common and recommended approach for most form use cases. Here’s a breakdown of why it works, plus when you might need to consider adding state:

Why Stateless Components Work Perfectly Here #

Redux Form handles nearly all form-related state management in the Redux store, so your component doesn’t need local state to function. Your component’s job is just to:

• Render form fields using the Field component
• Trigger submission by dispatching your signUpUser action
• Use the props injected by Redux Form (like handleSubmit, invalid, or pristine)

Since you’re connecting to Redux to access the signUpUser action creator, all core logic lives outside the component itself. This keeps your code focused and easy to test.

Optional: Refactor with Hooks for Cleaner Code #

If you’re using React 16.8+, you can replace the connect HOC with React Redux hooks to make your functional component even more concise:

import React from "react";
import { Field, reduxForm } from "redux-form";
import { useDispatch } from "react-redux";
import RaisedButton from 'material-ui/RaisedButton';
import { Link } from 'react-router-dom';
import { signUpUser } from "../actions/index.js";
import { SIGN_IN } from '../constants/routes';
import { renderTextField } from '../helpers/reduxFormField';

const SignUpForm = ({ handleSubmit, invalid }) => {
  const dispatch = useDispatch();

  const onSubmit = (values) => {
    dispatch(signUpUser(values));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Field name="email" component={renderTextField} label="Email" />
      <Field name="password" component={renderTextField} label="Password" type="password" />
      
      <RaisedButton type="submit" disabled={invalid} label="Sign Up" />
      <Link to={SIGN_IN}>Already have an account?</Link>
    </form>
  );
};

export default reduxForm({ form: "signUp" })(SignUpForm);

When Would You Need to Add State? #

You only need to introduce state (either via class component or React hooks like useState) if you require local UI state that doesn’t belong in the Redux store. Examples include:

• Toggling password visibility (show/hide)
• Tracking multi-step form progress (e.g., step 1: personal info, step 2: billing)
• Managing temporary UI states like component-specific loading spinners
• Handling side effects tightly coupled to the component that don’t need to be shared across the app

Summary #

Stick with your functional component for now—it’s clean, focused, and aligns perfectly with Redux Form’s design. Only add state if you encounter one of the scenarios above, and even then, you can use React hooks to keep it as a functional component instead of switching to a class.

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