React+Redux管理搜索表单：搜索条件存Redux还是本地状态？

Great question—this is one of the most common decisions developers face when combining Redux with form inputs. Let’s break down the tradeoffs and best practices clearly.

When to Store Search Criteria in Redux #

You should save search conditions (name, number) to Redux if any of these apply:

• Other components in your app need access to the current search state (e.g., a sidebar showing active filters, or a header displaying the current search term)
• You need to persist the search criteria across page refreshes (you can pair Redux with local storage for this)
• Your search logic involves complex interactions with other Redux state (e.g., fetching related data alongside search results, or triggering side effects based on input changes)

How to Handle onChange with Redux #

If you go this route, you’ll create actions to update the search state, handle those actions in a reducer, and connect your component to Redux to dispatch actions and read state:

1. Define action creators (or use Redux Toolkit’s createSlice to auto-generate them):

// actions.js (or use Redux Toolkit for cleaner code)
export const updateSearchName = (name) => ({
  type: 'UPDATE_SEARCH_NAME',
  payload: name
});

export const updateSearchNumber = (number) => ({
  type: 'UPDATE_SEARCH_NUMBER',
  payload: number
});

2. Update your reducer to track the search criteria:

// reducer.js
const initialState = {
  searchName: '',
  searchNumber: '',
  searchResults: []
};

export const searchReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_SEARCH_NAME':
      return { ...state, searchName: action.payload };
    case 'UPDATE_SEARCH_NUMBER':
      return { ...state, searchNumber: action.payload };
    // Existing case for handling search results
    case 'SET_SEARCH_RESULTS':
      return { ...state, searchResults: action.payload };
    default:
      return state;
  }
};

3. Connect your component using React-Redux hooks:

// SearchForm.jsx
import { useSelector, useDispatch } from 'react-redux';
import { updateSearchName, updateSearchNumber, fetchSearchResults } from './actions';

const SearchForm = () => {
  const { searchName, searchNumber, searchResults } = useSelector(state => state.search);
  const dispatch = useDispatch();

  const handleSearch = () => {
    dispatch(fetchSearchResults({ name: searchName, number: searchNumber }));
  };

  return (
    <div>
      <input
        type="text"
        value={searchName}
        onChange={(e) => dispatch(updateSearchName(e.target.value))}
        placeholder="Enter name"
      />
      <input
        type="text"
        value={searchNumber}
        onChange={(e) => dispatch(updateSearchNumber(e.target.value))}
        placeholder="Enter number"
      />
      <button onClick={handleSearch}>Search</button>
      
      {/* Results table */}
      <table>
        <thead>
          <tr><th>Name</th><th>Number</th></tr>
        </thead>
        <tbody>
          {searchResults.map(item => (
            <tr key={item.id}>
              <td>{item.name}</td>
              <td>{item.number}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

When to Use Local State Instead #

You should stick to React’s local useState for search criteria if:

• The search inputs are only used within this single component
• No other parts of your app need to know about the input values before the search is submitted
• You want to keep your Redux store focused on global state, not transient form values

How to Handle onChange with Local State #

This approach is simpler and avoids cluttering your Redux store with temporary state:

// SearchForm.jsx
import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchSearchResults } from './actions';

const SearchForm = () => {
  const [searchName, setSearchName] = useState('');
  const [searchNumber, setSearchNumber] = useState('');
  const searchResults = useSelector(state => state.search.searchResults);
  const dispatch = useDispatch();

  const handleSearch = () => {
    // Pass local state values to your Redux search action
    dispatch(fetchSearchResults({ name: searchName, number: searchNumber }));
  };

  return (
    <div>
      <input
        type="text"
        value={searchName}
        onChange={(e) => setSearchName(e.target.value)}
        placeholder="Enter name"
      />
      <input
        type="text"
        value={searchNumber}
        onChange={(e) => setSearchNumber(e.target.value)}
        placeholder="Enter number"
      />
      <button onClick={handleSearch}>Search</button>
      
      {/* Results table (still fetched via Redux) */}
      <table>
        <thead>
          <tr><th>Name</th><th>Number</th></tr>
        </thead>
        <tbody>
          {searchResults.map(item => (
            <tr key={item.id}>
              <td>{item.name}</td>
              <td>{item.number}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

Best Practices Recap #

1. Start with local state: It’s simpler and reduces unnecessary Redux boilerplate for transient form values.
2. Move to Redux only when needed: If the state needs to be shared, persisted, or part of complex business logic, then it belongs in Redux.
3. Use Redux Toolkit if you go the Redux route: Tools like createSlice and createAsyncThunk will simplify your action and reducer code significantly.

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