use-redux-form

use-redux-form

With use-redux-form, any kind of form components can be possible to use simply with Redux store object.

Inspired by ReduxForm

Install

npm install use-redux-form

API

more docs are coming...

• getFieldProps

Usage

examples are coming...

import React from 'react'
import { useDispatch } from 'react-redux'
import useReduxForm from 'use-redux-form/es'

const Component = ({ isLoading }) => {
  const dispatch = useDispatch();

  const { handleSubmit, getFieldProps } = useReduxForm({
    storePath: 'user.form',

    disable: () => isLoading,

    validate: (values) => {
      const errors = {};

      if (!values.a) {
        errors.a = 'error!';
      }

      return errors;
    },

    onSubmit: ({ isInvalid, errors }) => {
      if (isInvalid) {
        return Object.values(errors).forEach((value) => {
          if (value) {
            someAlert(value);
          }
        });
      }

      dispatch(someAction());
    },

    // transform data before into props data
    // e.g. some components ask specific field type as value
    transform: ({ name, value }) => {
      if (name === 'a' && isData(value)) {
        return new Date(value);
      }

      return value;
    },

    onChange: ({ name, value }) {
      // name is key name
      // value is from field
      dispatch(someAction({ name, value }))
    },
  });

  return (
    <Field {...getFieldProps('some-field-name' />
    <Button onClick={handleSubmit}>Confirm</Button>
  )
}

Troubleshoot

Duplicate dependencies issues

You could have Invalid Hook Call Warning issue if you use such as npm link or something.

There is a way to solve this issue by using alias, please read this.

alias: {
  react: Path.resolve('./node_modules/react'),
  'react-redux': Path.resolve('./node_modules/react-redux'),
  ...
},

Todo

• Unit test
• Provide API doc
• Provide examples
• Provide actions, types

License

MIT