redux-saga-final-form

redux-saga-final-form

Simple integration between react-final-form and redux-saga

This module is created as a replacement for unsupported redux-promise-listener or react-redux-promise-listener

Installation

npm install --save redux-saga-final-form

or

yarn add redux-saga-final-form

Usage

in your form component

import { useListener } from 'redux-saga-final-form';
import { Form } from "react-final-form";

export const MyComponent = () => {
    const formListener = useListener(SUBMIT_START_ACTION, SUBMIT_SUCCESS_ACTION, SUBMIT_FAIL_ACTION);
    return (
        <Form
            onSubmit={formListener}
            render={(formRenderProps) => (
                <form onSubmit={formRenderProps.handleSubmit}>
                    ...
                </form>
            )}
        />
    );
};

and in your sagas:

import { handleListeners } from "redux-saga-final-form";
import createSagaMiddleware from "redux-saga";

const store = createStore(
  reducer,
  initialState,
  applyMiddleware(...otherMiddleware, handleListeners)
)

SUBMIT_START_ACTION example:

export const submitStartAction = (payload: { formField1: string }) => ({
    type: SUBMIT_START_ACTION
    payload
});