Prefab-Form-Saga

A saga written to handle Prefab Form submits. Out of the gates, Prefab Form provides a form submit action that you can wire into your form or buttons. That event doesn't automatically get picked up though. This provides a saga that will validate your form and send off an action accordingly.

Requirements

In order for this saga to work, you need to be using Redux Saga. The most common setup in Airglow is to have the following:

• Airglow Core
• Redux Store
• Saga Plugin
• Prefab Plugin
• Form Prefab

Getting Started

To initialize this saga within Airglow, you'll need to do the following:

import saga from '@airglow/prefab-form-saga';

const App = () => (
  <Airglow
    store={ReduxStore}
    plugins={plugins}
    bootstrap={{
      sagas: saga
    }}
  >
    <MainContainer />
  </Airglow>
);

Configuring Your Form

The basic Prefab Form allows for custom configuration options out of the box. Our saga leverages this and allows you to add the following options:

Config Key	Description
invalidAction	An action to dispatch if the form is invalid.
invalidActions	An array of actions to dispatch if the form is invalid.
validAction	An action to dispatch if the form is valid.
validActions	An array of actions to dispatch if the form is valid.
successAction	An action to dispatch if a save operation succeeds.
successActions	An array of actions to dispatch if a save operation succeeds.
errorActions	An action to dispatch if a save operation failes.
errorActions	An array of actions to dispatch if a save operation fails.
submitSaga	A custom redux saga to trigger if the form is valid
resetOnSuccess	A boolean to determine if the form resetActions should trigger after success. Default is true

Please note, this saga doesn't actually run any save operations. It simply validates and calls the invalid or valid actions accordingly. It is up to you to respond to the validAction(s) or provide a submitSaga. From there, you must perform the save and trigger the successActions and errorActions accordingly.

Another thing to note: the success actions will automatically trigger a reset of all the form fields.

Example Form Prefab

import prefab from '@airglow/prefab';
import '@airglow/prefab-form';
import { showError, submitForm, showSuccess } from 'actions';

export const prefabs = prefab({
  pizzaOrder: {
    type: 'value'
    fields: {
      size: { required: true },
      quantity: { fieldType: 'number', required: true, min: 1, max: 99 },
      toppings: {  }
    },
    invalidAction: showError,
    validAction: submitForm,
    successAction: showSuccess,
    errorAction: showError
  }
});