使用Redux时搭配useState处理表单是否属于反模式？

Great question! This is such a common confusion point when mixing Redux with React forms—let’s unpack it clearly.

1. Why use useState for form local state? #

First off, not every piece of state needs to live in the global Redux store. The store is meant for state that needs to be shared across multiple components, or state that affects the overall app behavior.

For simple forms (like a login form, a single-input search bar, or a contact form where the input only matters when submitting), keeping the state local with useState makes perfect sense:

• Better performance: Every change to Redux state triggers a subscription update and potentially re-renders components connected to the store. Typing into a form would mean dozens of these updates per second—completely unnecessary if the state only lives in the form component.
• Simpler code: You don’t have to write action types, action creators, reducers, and connect logic just to handle input changes. Local state keeps the form logic self-contained and easy to maintain.
• No over-engineering: Redux adds overhead. Using it for trivial local state is like using a sledgehammer to hang a picture.

2. When should you use Redux for form state? #

There are cases where putting form state in Redux is the right call:

• Shared form state: If your form is split across multiple components (e.g., a multi-step checkout form where each step is a separate component, and you need to display progress or summary data elsewhere in the app).
• Persistent/undoable state: If you need to save form drafts, support undo/redo actions, or persist form state across page reloads.
• Global side effects: If form changes need to trigger other app-wide actions (e.g., updating a filter that affects a list component elsewhere).

In these scenarios, using mapStateToProps to pull in relevant global state and mapDispatchToProps to dispatch actions on input changes makes total sense.

3. Is using local state for forms an anti-pattern? #

Absolutely not! The official Redux docs explicitly recommend using local state for UI state that doesn’t need to be global. The key principle here is:

Use Redux for state that needs to be shared across your application, and local state for everything else.

Treating every piece of state as global is actually the anti-pattern—it bloats your store, makes debugging harder, and adds unnecessary complexity.

Quick Example #

Let’s say you have a basic login form:

import { useState } from 'react';
import { useDispatch } from 'react-redux';
import { login } from '../actions/authActions';

const LoginForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();
    // Only dispatch to Redux when we need to save/submit the data
    dispatch(login({ username, password }));
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Username"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button type="submit">Login</button>
    </form>
  );
};

This is clean, efficient, and totally acceptable. We only touch Redux when we need to send the form data to the global state (or trigger an API call), not on every keystroke.

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