@bedrockstreaming/form-redux
TypeScript icon, indicating that this package has built-in type declarations

0.9.2 • Public • Published

form-redux

form-redux is a redux slice for managing the forms steps.

❓ Why

Since we are using react-hook-form to persist data locally, we are only storing the form data and step information on each form submission.

🏗️ Install

npm install @bedrockstreaming/form-redux

🚀 Usage

Import and subscribe the reducer.

// reducers
import { reducer as forms } from '@bedrockstreaming/forms';

combineReducers({ forms, ... });

Use redux to control the form state.

// a form using actions
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { FormBuilder } from '@bedrockstreaming/form-builder';
import {
  getCurrentStepIndex,
  isLastStep,
  resetForm,
  initForm,
  setNextStep,
} from '@bedrockstreaming/form-redux';

import { schema, formId } from './path/to/my/config';
import { fooSubmitAction } from '<my-app-module>';

export const FooForm = () => {
  const dispatch = useDispatch();
  const currentStepIndex = useSelector(getCurrentStepIndex(formId));
  const shouldSubmit = useSelector(isLastStep(formId));

  useEffect(() => {
    dispatch(initForm(formId, schema));
  }, [dispatch]);

  const handleSubmit = (fieldValues) => {
    if (shouldSubmit) {
      dispatch(fooSubmitAction(fieldValues));
      dispatch(resetForm(formId));
    } else {
      dispatch(setNextStep(formId));
    }
  };

  return (
    <FormBuilder
      dictionary={dictionary}
      schema={schema}
      onSubmit={handleSubmit}
      currentStepIndex={currentStepIndex}
    />
  );
};

Running unit tests

Run nx test form-redux to execute the unit tests via Jest.

Readme

Keywords

none

Package Sidebar

Install

npm i @bedrockstreaming/form-redux

Weekly Downloads

13

Version

0.9.2

License

none

Unpacked Size

44.4 kB

Total Files

8

Last publish

Collaborators

  • tetsu9901
  • jsulpis
  • martinschneider01
  • jcoquet
  • fdubost
  • slashgear
  • hpierre74
  • nbazille