Redux Form Recipes

Epics

Setup

Examples below assume that you have setup redux-observable middleware so that firebase is available within your epics. View the setup section of recipes for epics.

redux-form Input

Debounce writing of info that is typed to a ref on Firebase (useful for syncing changes typed into redux-form inputs).

import firebase from 'firebase/app' import 'firebase/database' import { actionTypes } from 'redux-form'; import { Observable } from 'rxjs'; import 'rxjs/add/operator/switchMap'; import 'rxjs/add/operator/do'; import 'rxjs/add/operator/debounceTime'; // Watch for redux-form change events const change = action$ => action$.ofType(actionTypes.CHANGE).debounceTime(200); // When form fields are blurred (useful for persisting changes added by extensions and auto-fillers) const blur = action$ => action$.ofType(actionTypes.BLUR); // Combine form input streams const formInput = actionStreams$ => Observable.merge(...actionStreams$); const firebaseSet$ = (path, payload) => Observable.fromPromise(firebase.database().ref(path).set(payload)); export const reduxFormFieldChangeEpic = (action$, { getState, dispatch }) => // create a stream of formInput actions, listen to change and blur events formInput([change(action$), blur(action$)]) .do(({ meta }) => { // create a side-effect for dispatching action before update dispatch({ type: 'FORM_FIELD_UPDATING', payload: { meta }, }); // dispatch updating action }) .switchMap((action) => { // switch the stream to a stream that returns a different stream const { meta, payload } = action; const path = 'some/path' // make call to update firebase return firebaseSet$(path, payload) // map each promise to an action that indicates the update complete .mapTo(({ type: 'FORM_FIELD_UPDATED', payload, meta: { path, ...meta }, })); }); 

redux-form Array

Writing of info that is changed in a redux-form array to firebase.

import firebase from 'firebase/app' import 'firebase/database' import { actionTypes } from 'redux-form'; import { get } from 'lodash'; import { Observable } from 'rxjs'; import 'rxjs/add/operator/mergeMap'; import { actionTypes } from 'redux-form'; // When item is removed from redux-form array const arrayRemove = action$ => action$.ofType(actionTypes.ARRAY_REMOVE); // When item is pushed to redux-form array const arrayPush = action$ => action$.ofType(actionTypes.ARRAY_PUSH); // Combine form array action streams const formArrayAction = actionStream$ => Observable.merge(...actionStream$); export function firebaseSet$(path, payload) { return Observable.fromPromise(firebase.database().ref(path).set(payload)); } export function reduxFormArrayEpic(action$, { getState }) { // create a stream of formArray actions, listen to add and remove events return formArrayAction([arrayRemove(action$), arrayPush(action$)]) // map arrayActions to an Observable which is merged in the output Observable of promises .mergeMap((action) => { const { form } = getState(); const { meta, meta: { field } } = action; const payload = get(form, `${meta.form}.values.${field}`, null); const path = 'some/path' // make call to update firebase return firebaseSet$(path, payload) // the action indicating the action was completed .mapTo(({ type: 'FORM_ARRAY_CHANGE', payload: meta, })); }); }