Creating a Multipage Form with React-Hook-Form and Redux-Toolkit

Building a multipage form in React can be streamlined using React-Hook-Form for form handling and Redux-Toolkit for state management. Here’s a guide on how to effectively combine these tools.

Step 1: Setup Your Project
First, set up your React project and install the necessary dependencies:

npx create-react-app multipage-form
cd multipage-form
npm install @reduxjs/toolkit react-redux react-hook-form

Step 2: Configure Redux-Toolkit
Create a Redux store and slice to manage the form state.

store.js

import { configureStore } from '@reduxjs/toolkit';
import formReducer from './formSlice';

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

formSlice.js

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  formData: {},
};

const formSlice = createSlice({
  name: 'form',
  initialState,
  reducers: {
    updateFormData: (state, action) => {
      state.formData = { ...state.formData, ...action.payload };
    },
    resetFormData: (state) => {
      state.formData = {};
    },
  },
});

export const { updateFormData, resetFormData } = formSlice.actions;
export default formSlice.reducer;

Step 3: Create Form Pages
Define individual form pages using react-hook-form to handle validation and data collection.

Page1.js

import React from 'react';
import { useForm } from 'react-hook-form';
import { useDispatch } from 'react-redux';
import { updateFormData } from './formSlice';
import { useNavigate } from 'react-router-dom';

const Page1 = () => {
  const { register, handleSubmit } = useForm();
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const onSubmit = (data) => {
    dispatch(updateFormData(data));
    navigate('/page2');
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('firstName')} placeholder="First Name" />
      <input {...register('lastName')} placeholder="Last Name" />
      <button type="submit">Next</button>
    </form>
  );
};

export default Page1;

Page2.js

import React from 'react';
import { useForm } from 'react-hook-form';
import { useDispatch, useSelector } from 'react-redux';
import { updateFormData } from './formSlice';
import { useNavigate } from 'react-router-dom';

const Page2 = () => {
  const { register, handleSubmit } = useForm();
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const formData = useSelector((state) => state.form.formData);

  const onSubmit = (data) => {
    dispatch(updateFormData(data));
    navigate('/summary');
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} placeholder="Email" />
      <input {...register('phone')} placeholder="Phone" />
      <button type="submit">Next</button>
    </form>
  );
};

export default Page2;

Step 4: Summary Page
Create a summary page to display collected data.

Summary.js

import React from 'react';
import { useSelector } from 'react-redux';

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

  return (
    <div>
      <h2>Summary</h2>
      <pre>{JSON.stringify(formData, null, 2)}</pre>
    </div>
  );
};

export default Summary;

Step 5: Set Up Routing
Configure routing to navigate between form pages. Or you could just have a single page and have the different form show up when you click on the next button, but for this example I will use the routing option

App.js

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Page1 from './Page1';
import Page2 from './Page2';
import Summary from './Summary';
import { Provider } from 'react-redux';
import { store } from './store';

const App = () => (
  <Provider store={store}>
    <Router>
      <Routes>
        <Route path="/" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/summary" element={<Summary />} />
      </Routes>
    </Router>
  </Provider>
);

export default App;

Conclusion
By using react-hook-form and redux-toolkit, you can easily manage form data across multiple pages. This approach ensures a seamless user experience with efficient state management and form handling.