redux-saga-form v0.2.22

redux-saga-form

IMPORTANT: redux-saga-form is no longer maintained.

redux-saga-form is an extension of React Redux Form that integrates with redux-saga and enables a strict separation between business and presentation logic.

Why this library?

TODO

Installation

# dependencies
yarn add react redux react-redux redux-thunk redux-saga react-redux-form

yarn add redux-saga-form

(Note: redux-thunk is required by React Redux Form).)

Usage Example

Run the saga included with the library. This only has to be done once:

store.js

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import createSagaMiddleware from 'redux-saga';
import { formSaga } from 'redux-saga-form';

import reducer from './reducers';
import mySaga from './sagas';


const sagaMiddleware = createSagaMiddleware();
const store = createStore(reducer, applyMiddleware(thunkMiddleware, sagaMiddleware));

sagaMiddleware.run(formSaga);
sagaMiddleware.run(mySaga);

export default store;

Create the form definition:

forms.jsx

import { call } from 'redux-saga/effects';
import { Form, Field, FieldTypes } from 'redux-saga-form';
import validator from 'validator';


export const registerForm = new Form('forms.register', "Create Account")
    .schema({
        first_name: new Field(FieldTypes.text, "First name", {required: true}),
        
        last_name: new Field(FieldTypes.text, "Last name", {required: true}),
        
        email: new Field(FieldTypes.email, "Email", {required: true})
            .validators({isEmail: (val) => !!val && validator.isEmail(val)})
            .messages({isEmail: "Please enter a valid email address."}),
        
        password: new Field(FieldTypes.password, "Password", {required: true})
            .validators({length: (value) => !!value && value.length >= 8})
            .messages({length: "Password must have at least 8 characters."}),
        
        password2: new Field(FieldTypes.password, "Confirm Password", {required: true}),
    })
    .validators({passwordsMatch: (data) => data.password === data.password2})
    .messages({passwordsMatch: "Passwords do not match."})
    .submit(function* (data, props, success, failure) {
        const res = yield call(fetch, '/api/register/', {
            method: 'POST',
            body: data,
        });
        
        if (res.ok) {
            yield success();
        } else {
            yield failure({errors: "An error occured."});
        }
    });

Create the form reducer:

reducers.js

import { combineReducers } from 'redux';
import { combineForms } from 'react-redux-form';

import * as forms from './forms';


export default combineReducers({
    // ...
    forms: combineForms({
        register: forms.registerForm.initialData(),
    }, 'forms'),
});

Create the form saga:

sagas.js

import * as forms from './forms';


export default function* () {
    yield [
        // ...
        forms.registerForm.saga(),
    ];
};

Display the form:

app.jsx

import React from 'react';
import { FormView } from 'redux-saga-form';

import * as forms from './forms';


export default class App extends React.Component {
    render() {
        return <div>
            <FormView form={forms.registerForm} />
        </div>;
    }
}