# formik-redux

> Formik + Redux

Latest version **4.2.0** (published 2023-09-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install formik-redux
pnpm add formik-redux
yarn add formik-redux
bun add formik-redux
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.2.0 |
| Published | 2023-09-25 |
| First published | 2019-11-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 21.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | wesleyody@gmail.com |
| Maintainers | wesleyody |
| Keywords | formik, redux |

## Links

- npm: https://www.npmjs.com/package/formik-redux
- Repository: https://github.com/wesleyody/formik-redux
- Homepage: https://github.com/wesleyody/formik-redux#readme
- Issues: https://github.com/wesleyody/formik-redux/issues
- npm.io page: https://npm.io/package/formik-redux

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 4.2.0 (latest) — 2023-09-25
- 4.1.1 — 2023-09-13
- 4.1.0 — 2023-09-12
- 4.0.1 — 2023-09-06
- 4.0.0 — 2023-08-23
- 3.1.1 — 2023-07-20
- 3.1.0 — 2023-01-04
- 3.0.0 — 2021-05-13
- 2.1.1 — 2021-05-12
- 2.0.0 — 2019-11-06
- 1.0.0 — 2019-11-05
- 0.0.8 — 2019-11-04
- 0.0.7 — 2019-11-04
- 0.0.6 — 2019-11-04
- 0.0.5 — 2019-11-04
- … 4 more at https://npm.io/package/formik-redux/versions

## README

# Formik + Redux
Combines the performance of Formik with the state control of Redux

## How it works
The start and stop of the form submit, is controlled by de redux state while all the other features is controlled by Formik

When you submit your form, you should:
```javascript
import { compose } from "redux";
import { connect } from "react-redux";
import { startSubmit, stopSubmit, withForm } from "formik-redux";

const FORM_NAME = "yourForm";

export const mapDispatchToProps = dispatch => ({
    onSubmit () {
        dispatch( startSubmit( FORM_NAME ) );
    },
    onSubmitSuccess () {
        dispatch( stopSubmit( FORM_NAME ) );
    }
});

const DummyForm = props => <div { ...props }/>;

export default compose(
    connect( null, mapDispatchToProps ),
    withForm({
        form: FORM_NAME, //required
        handleSubmit: ( values, { onSubmit, submitSuccess } ) => {
            onSubmit();
            onSubmitSuccess();
        },
        // ...form props of Formik
    })
)( DummyForm );
```

## Motivation
Redux-form has became too much complex and lacks performance, in the other hand, Formik is much more simple and has better performance because every *keystroke* doesn't trigger a render event in every component. But it's not that simple to control the form submit with Formik. When you use, `redux-saga`, for instance, you won't be able to control the form from there.
So here we are, dispatching actions now can trigger the Formik submit.

## Getting Started

### Prerequisites
- `formik@2.x`
- `react@16.x || 17.x || 18.x`
- `react-redux@7`
- `redux@4`

### Install
```
npm install --save formik-redux
```

### Usage
In your root reducer, you must add our reducer:
```javascript
import { reducer as formik } from "formik-redux"; // it must be formik the reducer name
import { combineReducers } from "redux";

import { otherReducer } from "./reducers";

export const appReducer = combineReducers({
    formik,
    otherReducer
});
```

#### HOC
In your form component, use the hoc:
```javascript
import { withForm } from "formik-redux";

const DummyForm = props => <form onSubmit={ props.handleSubmit }></form>;

export default withForm({ form: "heygoodlooking" })( DummyForm );
```
You `must` pass the form prop. All the other props will be passed to Formik (see [docs](https://formik.org/docs/api/withFormik) for more details).

To indicate to redux that the submit started or stopped, you must dispatch the appropriate action.

```javascript
import { startSubmit, stopSubmit, withForm } from "formik-redux";
import { connect } from "react-redux";
import { compose } from "recompose";

const FORM_NAME = "myBeautifulForm";

const DummyForm = ({ handleSubmit, submitting }) => (
    <form onSubmit={ handleSubmit }>
        <button type="submit" disabled={ submitting }></button>
    </form>
);

async function onSubmit ( values, { props } ) {
    await props.dispatch( startSubmit( FORM_NAME ) );
    await props.dispatch( stopSubmit( FORM_NAME ) );
};

export default compose(
    connect( null, {
        startSubmit,
        stopSubmit
    }),
    withForm({
        form: FORM_NAME,
        handleSubmit: onSubmit
    })
)( DummyForm );
```

As you can see in the example above, is injected the prop `submitting` in the component to indicate if the submit finished or not.

##### Submit error
If there was some problem in the submit, to pass the error, you should use the second argument of the `stopSubmit` action.

```javascript
const DummyForm = ({ handleSubmit, error, submitting }) => (
    <form onSubmit={ handleSubmit }>
        <button type="submit" disabled={ submitting }></button>
        { error && <span>{ error }</span> }
    </form>
);

async function onSubmit ( values, { props } ) {
    await props.dispatch( stopSubmit( FORM_NAME, "Something went wrong" ) );
};
```

In the component will be injected the prop `error`.

#### Hook
To use the hook, you must import `useForm` and pass the prop `form`.

```javascript
import { useForm } from "formik-redux";

const FORM_NAME = "foobar";

const DummyForm = () => {
    const { error, submitting, ...formikProps } = useForm({
        form: FORM_NAME,
        // ...form props of Formik
    });
};

```

The hook will return the props `error`, `submitting` and the other formik props (see [docs](https://formik.org/docs/api/useFormik) for more details).

##### Form
To use hooks with Formik Context you need to wrap your component.

```javascript
import { Field } from "formik";
import { Form, useForm } from "formik-redux";

const DummyForm = () => {
    const formik = useForm({
        form: FORM_NAME,
        // ...form props of Formik
    });

    return (
        <Form formik={ formik }>
            <Field name="test" />
        </Form>
    );
};

```

---
_Source: https://npm.io/package/formik-redux · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._