# redux-form-submit-with-saga

> Helper function for submitting redux-form with redux-saga

Latest version **0.0.3** (published 2016-10-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install redux-form-submit-with-saga
pnpm add redux-form-submit-with-saga
yarn add redux-form-submit-with-saga
bun add redux-form-submit-with-saga
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2016-10-24 |
| First published | 2016-10-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Zhenchao Chen |
| Maintainers | zhenchaochen |
| Keywords | redux, redux-form, redux-saga, submit, form |

## Links

- npm: https://www.npmjs.com/package/redux-form-submit-with-saga
- Repository: https://github.com/zhenchaochen/redux-form-submit-with-saga
- Homepage: https://github.com/zhenchaochen/redux-form-submit-with-saga#readme
- Issues: https://github.com/zhenchaochen/redux-form-submit-with-saga/issues
- npm.io page: https://npm.io/package/redux-form-submit-with-saga

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^15.3.2
- [redux](https://npm.io/package/redux.md) ^3.6.0
- [redux-form](https://npm.io/package/redux-form.md) ^6.1.1
- [redux-saga](https://npm.io/package/redux-saga.md) ^0.12.0
- [react-redux](https://npm.io/package/react-redux.md) ^4.4.5

## 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

- 0.0.3 (latest) — 2016-10-24
- 0.0.2 — 2016-10-24
- 0.0.1 — 2016-10-24

## README

#Why?

**redux-form:**
"If your onSubmit function returns a promise, the submitting property will be set to true until the promise has been resolved or rejected. If it is rejected with an object like new SubmissionError({ field1: 'error', field2: 'error' }) then the submission errors will be added to each field (to the error prop) just like async validation errors are."
(From "http://redux-form.com/6.1.1/docs/api/Props.md/")

**redux-saga:**
When working with redux-saga, typically you dispath an unblocked action, then redux-saga catches the event, fork an independent "thread" to handle the action.

**So how do you make your action return a promise?**

#How to use it?

Assume "SAVA_DATA" is the action you want to dispatch when submitting the form.

##1. In your redux-saga:
```javascript
import { submitFormSaga } from "redux-form-submit-with-saga";

export default function* root() {
  yield fork(takeEvery, "SAVE_DATA", saveDataSaga);
  yield fork(submitFormSaga);
}

function* saveDataSaga(form, data) {
  const { response, error } = yield call(fetch...); //Your save data API.
  if (error) {
    yield put({ type: "SAVE_DATA_OK", target: form });
  } else {
    yield put({ type: "SAVE_DATA_FAIL", target: form });
  }
}
```

##2. In your form:
```javascript
import { submitFormSagaPromise } from "redux-form-submit-with-saga";

const FORM_NAME = "YOUR_UNIQUE_FORM_ID";


class SimpleForm extents React.Component {
  const myOnSubmit = (data) => {
    return submitFormSagaPromise(
      dispatch, // This is your store.dispath from redux
      { type: "SAVE_DATA", target: props.form, data: data },
      props.form,
      ["SAVA_DATA_OK", "SAVA_DATA_FAIL"] // The names should match the name in savaDataSaga
    )
  };

  render() {
    return (
      <div>
        <form onSubmit={props.handleSubmit(myOnSubmit)}>
          <div>
            <Field name="firstName" component="input" type="text" placeholder="First Name"/>
          </div>
        </form>
      </div>
    )
  }
}
export default reduxForm({
  form: 'UNIQUE_FORM_ID'  // a unique identifier for this form
})(SimpleForm)
```
#Notes:
1. You can rename "SAVA_DATA", "SAVA_DATA_OK" and "SAVA_DATA_FAIL", as long as they match in your form and saga.
2. Why "target"? => To support submitting multiple different forms simultaneously.

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