如何在向Reducer分发Action时避免本地状态重置？

看起来你已经找对了方向！把搜索条件存在组件本地状态，只在表单提交时同步到Redux，这是非常合理的做法，能避免Redux store被频繁更新。下面我帮你梳理下当前实现的合理性，以及一些优化和注意点：

一、当前思路的合理性确认 #

你将搜索条件criteria存储在组件本地状态，仅在表单提交时通过onSubmittedForm方法分发Action到Reducer，这个设计完全符合Redux的最佳实践——只把需要全局共享的状态放到Redux store中，用户输入过程中的临时搜索条件不需要全局同步，仅在提交查询时才同步给数据库查询逻辑使用。

二、关键代码的优化与验证 #

1. 组件内表单提交逻辑 #

假设你的表单是类组件（从你给出的state写法来看），提交方法可以这样实现：

handleSubmit = (e) => {
  e.preventDefault();
  // 调用connect注入的方法，将本地状态的搜索条件分发到Reducer
  this.props.onSubmittedForm(this.state.criteria);
}

在表单的onSubmit事件中绑定这个方法即可：

<form onSubmit={this.handleSubmit}>
  {/* 你的搜索条件输入框 */}
  <button type="submit">提交搜索</button>
</form>

2. Reducer的正确处理方式 #

确保你的Action创建函数和Reducer正确处理状态更新，同时遵循Redux状态不可变的要求：

// Action创建函数示例（compActions.js）
export const submitCriteria = (criteria) => ({
  type: 'SUBMIT_SEARCH_CRITERIA',
  payload: criteria
});

// Reducer示例
const initialState = {
  criteria: { group: '', province: '', realms: [] }
};

export const searchReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'SUBMIT_SEARCH_CRITERIA':
      return {
        ...state,
        // 浅拷贝payload对象，避免直接修改原状态
        criteria: { ...action.payload }
      };
    default:
      return state;
  }
};

三、常见注意事项与优化点 #

• 本地状态的正确更新：在用户输入时，要通过浅拷贝的方式更新本地的criteria状态，不能直接修改原对象，比如处理group输入框的变化：

handleGroupChange = (e) => {
  this.setState(prevState => ({
    criteria: {
      ...prevState.criteria,
      group: e.target.value
    }
  }));
}

province和realms的更新也要遵循同样的方式，保证状态的不可变性。

• 表单前置验证（可选）：如果需要在提交前校验搜索条件的合法性，可以在handleSubmit中先做校验，通过后再分发Action：

handleSubmit = (e) => {
  e.preventDefault();
  const { group } = this.state.criteria;
  
  // 示例：校验分组不能为空
  if (!group.trim()) {
    alert('请填写分组信息');
    return;
  }
  
  this.props.onSubmittedForm(this.state.criteria);
}

• 防止重复提交：可以给组件添加一个isSubmitting状态，在提交过程中禁用提交按钮，避免用户重复点击：

// 更新组件初始状态
state = {
  criteria: { group: '', province: '', realms: [] },
  isSubmitting: false
};

handleSubmit = (e) => {
  e.preventDefault();
  if (this.state.isSubmitting) return;
  
  this.setState({ isSubmitting: true });
  
  try {
    this.props.onSubmittedForm(this.state.criteria);
    // 如果需要等待数据库查询完成，可以在这里添加异步逻辑
    // await this.props.fetchDatabaseData(this.state.criteria);
  } finally {
    this.setState({ isSubmitting: false });
  }
}

然后在提交按钮上绑定禁用状态：

<button type="submit" disabled={this.state.isSubmitting}>
  {this.state.isSubmitting ? '提交中...' : '提交搜索'}
</button>

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