@airglow/prefab-form-saga
A saga to hook up prefab-forms to redux for saving
Last updated 2 months ago by dgrossen .
Apache-2.0 · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @airglow/prefab-form-saga 
SYNC missed versions from official npm registry.

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:

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
  }
});

Current Tags

  • 0.8.0                                ...           latest (2 months ago)

13 Versions

  • 0.8.0                                ...           2 months ago
  • 0.7.0                                ...           7 months ago
  • 0.6.2                                ...           7 months ago
  • 0.6.1                                ...           7 months ago
  • 0.6.0                                ...           7 months ago
  • 0.5.2                                ...           8 months ago
  • 0.5.0                                ...           a year ago
  • 0.4.0                                ...           2 years ago
  • 0.3.3                                ...           2 years ago
  • 0.3.2                                ...           2 years ago
  • 0.3.1                                ...           2 years ago
  • 0.3.0                                ...           2 years ago
  • 0.2.0                                ...           2 years ago
Maintainers (2)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 39
Dependencies (1)
Dev Dependencies (7)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |