React.js中如何用Redux Toolkit存储多步骤表单状态？

一、设计适配动态表单的Redux Store结构 #

先定义一个专门管理多步骤表单的slice，核心包含当前步骤索引、各步骤表单数据集合，可选加入验证状态字段，确保后续新增步骤时能灵活扩展。

// features/multiStepForm/multiStepFormSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  currentStep: 0,
  formData: {
    step1: {},
    step2: {},
    step3: {}
  },
  validationErrors: {}
};

const multiStepFormSlice = createSlice({
  name: 'multiStepForm',
  initialState,
  reducers: {
    // 更新当前步骤
    setCurrentStep: (state, action) => {
      state.currentStep = action.payload;
    },
    // 保存单步骤表单数据
    saveStepData: (state, action) => {
      const { step, data } = action.payload;
      state.formData[step] = { ...state.formData[step], ...data };
    },
    // 重置整个表单
    resetForm: () => initialState,
    // 保存单步骤验证错误
    setValidationErrors: (state, action) => {
      const { step, errors } = action.payload;
      state.validationErrors[step] = errors;
    }
  }
});

export const { setCurrentStep, saveStepData, resetForm, setValidationErrors } = multiStepFormSlice.actions;
export default multiStepFormSlice.reducer;

将slice加入store配置：

// app/store.js
import { configureStore } from '@reduxjs/toolkit';
import multiStepFormReducer from '../features/multiStepForm/multiStepFormSlice';

export const store = configureStore({
  reducer: {
    multiStepForm: multiStepFormReducer
  }
});

二、单步表单的状态管理与全局提交 #

每步表单用本地状态（useState或react-hook-form）管理实时输入，点击「Next」时先完成当前步骤验证，通过后再将本地状态dispatch到Redux store，同时切换步骤。

以Step1为例：

// features/multiStepForm/Step1.js
import { useState } from 'react';
import { useDispatch } from 'react-redux';
import { saveStepData, setCurrentStep, setValidationErrors } from './multiStepFormSlice';

const Step1 = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const dispatch = useDispatch();

  const validate = () => {
    const errors = {};
    if (!name.trim()) errors.name = '姓名不能为空';
    if (!email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) errors.email = '请输入合法邮箱';
    return errors;
  };

  const handleNext = () => {
    const errors = validate();
    if (Object.keys(errors).length > 0) {
      dispatch(setValidationErrors({ step: 'step1', errors }));
      return;
    }
    // 提交当前步骤数据到全局store
    dispatch(saveStepData({ step: 'step1', data: { name, email } }));
    // 切换到下一步
    dispatch(setCurrentStep(1));
  };

  return (
    <div className="step-form">
      <div className="form-group">
        <label>姓名</label>
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
        <span className="error">{validate().name}</span>
      </div>
      <div className="form-group">
        <label>邮箱</label>
        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
        <span className="error">{validate().email}</span>
      </div>
      <button onClick={handleNext}>Next</button>
    </div>
  );
};

export default Step1;

如果用react-hook-form会更简洁，自动处理验证和状态，核心逻辑仍是验证通过后dispatch数据到store。

三、实时更新Summary组件 #

Summary组件通过useSelector从Redux store取出所有已保存的formData，按步骤渲染内容，store数据更新时组件会自动重新渲染。

// features/multiStepForm/Summary.js
import { useSelector } from 'react-redux';

const Summary = () => {
  const { formData } = useSelector(state => state.multiStepForm);

  return (
    <div className="summary">
      <h3>已填写信息汇总</h3>
      {formData.step1.name && <p><strong>姓名:</strong> {formData.step1.name}</p>}
      {formData.step1.email && <p><strong>邮箱:</strong> {formData.step1.email}</p>}
      {formData.step2.address && <p><strong>地址:</strong> {formData.step2.address}</p>}
      {/* 其他步骤信息同理扩展 */}
    </div>
  );
};

export default Summary;

四、核心思路总结 #

• Store扩展性：用formData对象按步骤存储数据，新增步骤只需在formData中添加对应键值对。
• 状态分工：本地状态负责实时输入和即时验证，全局状态只保存已通过验证的有效数据，避免无效值污染store。
• 自动更新机制：利用Redux的订阅特性，formData变化时Summary组件自动获取最新数据并渲染。

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