如何将非Redux的React表单代码改造为Redux Toolkit实现？

1. 创建表单状态切片 #

先创建专门管理表单数据的slice，把DataA和DataB拆分成独立状态节点，让后续组件能精准订阅：

// features/form/formSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  dataA: {}, // FormA初始数据
  dataB: {}  // FormB初始数据
};

const formSlice = createSlice({
  name: 'form',
  initialState,
  reducers: {
    updateDataA: (state, action) => {
      // 仅更新dataA，不影响dataB
      state.dataA = { ...state.dataA, ...action.payload };
    },
    updateDataB: (state, action) => {
      // 仅更新dataB，不影响dataA
      state.dataB = { ...state.dataB, ...action.payload };
    },
    resetForm: (state) => {
      state.dataA = initialState.dataA;
      state.dataB = initialState.dataB;
    }
  }
});

export const { updateDataA, updateDataB, resetForm } = formSlice.actions;
export default formSlice.reducer;

2. 配置Redux Store #

在项目入口配置store，将切片注册进去：

// app/store.js
import { configureStore } from '@reduxjs/toolkit';
import formReducer from '../features/form/formSlice';

export const store = configureStore({
  reducer: {
    form: formReducer
  }
});

然后在根组件用Provider包裹整个应用：

// index.js
import { Provider } from 'react-redux';
import { store } from './app/store';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
);

3. 改造子组件：精准订阅状态 #

修改FormA和FormB，让它们只订阅自身需要的状态，避免无关状态变化触发渲染：

FormA组件 #

// components/FormA.js
import { useSelector, useDispatch } from 'react-redux';
import { updateDataA } from '../features/form/formSlice';

const FormA = () => {
  // 仅获取dataA，dataB变化不会触发此组件渲染
  const dataA = useSelector(state => state.form.dataA);
  const dispatch = useDispatch();

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    dispatch(updateDataA({ [name]: value }));
  };

  return (
    <div>
      <input
        name="fieldA1"
        value={dataA.fieldA1 || ''}
        onChange={handleInputChange}
      />
      {/* 其他FormA字段 */}
    </div>
  );
};

export default FormA;

FormB组件 #

// components/FormB.js
import { useSelector, useDispatch } from 'react-redux';
import { updateDataB } from '../features/form/formSlice';

const FormB = () => {
  // 仅获取dataB，dataA变化不会触发此组件渲染
  const dataB = useSelector(state => state.form.dataB);
  const dispatch = useDispatch();

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    dispatch(updateDataB({ [name]: value }));
  };

  return (
    <div>
      <input
        name="fieldB1"
        value={dataB.fieldB1 || ''}
        onChange={handleInputChange}
      />
      {/* 其他FormB字段 */}
    </div>
  );
};

export default FormB;

4. BigForm聚合数据调用API #

BigForm通过useSelector获取完整表单数据，在需要时聚合后调用API：

// components/BigForm.js
import { useSelector, useDispatch } from 'react-redux';
import { resetForm } from '../features/form/formSlice';
import FormA from './FormA';
import FormB from './FormB';

const BigForm = () => {
  // 获取所有表单数据
  const { dataA, dataB } = useSelector(state => state.form);
  const dispatch = useDispatch();

  const handleSubmit = async () => {
    try {
      // 聚合dataA和dataB
      const formData = { ...dataA, ...dataB };
      // 调用API
      await fetch('/api/submit-form', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });
      // 提交成功后重置表单
      dispatch(resetForm());
    } catch (error) {
      console.error('提交失败:', error);
    }
  };

  return (
    <div>
      <FormA />
      <FormB />
      <button onClick={handleSubmit}>提交表单</button>
    </div>
  );
};

export default BigForm;

额外优化点 #

• 若表单字段极多，可将updateDataA/updateDataB改为单字段更新逻辑（Redux Toolkit的Immer已做优化，此步可选）。
• 复杂表单验证可放在slice的reducer中，或在组件内用useEffect监听状态变化实现。

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