Blog>
Snippets

Defining Action Creators with createAction for Multi-Model Forms

Provide an example of defining action creators using Redux Toolkit's createAction utility, tailored for multi-model form updates.
import { createAction } from '@reduxjs/toolkit';

// Action creator for updating a user's personal details in a multi-model form
export const updatePersonalDetails = createAction(
  'form/updatePersonalDetails',
  function prepare({ userId, personalDetails }) {
    return {
      payload: { userId, personalDetails }
    };
  }
);

// Action creator for updating a user's preferences in a multi-model form
export const updatePreferences = createAction(
  'form/updatePreferences',
  function prepare({ userId, preferences }) {
    return {
      payload: { userId, preferences }
    };
  }
);
This code defines two action creators for a multi-model form using Redux Toolkit's createAction. The first action creator, updatePersonalDetails, is for updating personal details of a user, and the second, updatePreferences, is for updating user's preferences. Both use a 'prepare' function to construct the payload with the user's ID and the relevant section of form data.