dzNavitski

const fetchUserEpic = action$ =>
  action$.ofType(FETCH_USER)
    .mergeMap(action => {
       var date = Date.now();
       console.log(date)
       return fakeAjax(`/api/users/${action.payload}`)
        .map(response => fetchUserFulfilled(response))
        .takeUntil(
          action$.
            ofType(FETCH_USER_CANCELLED)

dzNavitski

Here is how I ended up making this work. For more context and background on the discussion, I recommend reading conversation in ReduxForm#2169 (and chiming in with your learnings, etc).

So, as per the conversation there, I tried the 'many little forms' approach. I am sharing both my approach, and a crude abstracted out gist that can hopefully help out y'all.

Essentially, with this approach:

1. You want to use each field as a little form which submits debounced onChange.
2. For each field as a little form, you want to abstract that into a component which can be provided an input, as much as possible.
3. Set autofocus for the first form.
4. For debounced onChange, I used react-debounced-input.

dzNavitski

import Joi from 'joi-full';

const schema = Joi.object().keys({
    postTitle: Joi.string()
        .required()
        .min(3)
        .options({
            language: {
                any: {
                    empty: '{{key}} is required',

dzNavitski

const editEpic = (action$, store) => action$
    .ofType(t.EDIT_UPDATE)
    .debounceTime(100)
    .mergeMap((action) => {
        const { path } = action.meta;

        return validate$()
            .delay(3000)
            .map(() => modelActions.modelSetPendingValidation({ value: false, path: path }))
            .takeUntil(

dzNavitski

const uploadDocumentEpic = action$ =>
    action$.ofType(UPLOAD_DOCUMENT).switchMap(action => {
        const {id, data} = action.payload
        const sub = new Subject()
        const requester = Observable.fromPromise(
            axios({
                url: 'https://api.foo.com',
                data: {
                    file: data
                },

dzNavitski

export const apiValidate = action$ => {
    return action$.ofType(validateRequestAction)
        .debounceTime(250)
        .switchMap((action) => (
            Observable.ajax({
                url: url,
                method: 'GET',
                crossDomain: true,
                headers: {
                    "Content-Type": 'application/json'

dzNavitski

/**
 * Prevent body scroll and overscroll.
 * Tested on mac, iOS chrome / Safari, Android Chrome.
 *
 * Based on: https://benfrain.com/preventing-body-scroll-for-modals-in-ios/
 *           https://stackoverflow.com/a/41601290
 *
 * Use in combination with:
 * html, body {overflow: hidden;}
 *

dzNavitski

module.exports = {
  root: true, // make to not take in any user specified rules in parent folders
  parser: 'babel-eslint',
  extends: ['airbnb', 'prettier', 'prettier/flowtype', 'prettier/react'],
  env: {
    browser: true,
    node: true,
    jest: true,
  },
  plugins: ['react', 'import', 'flowtype'],

dzNavitski

NGRX Data

A higher-order service abstraction for NGRX. It eliminates the boilerplate for CRUD operations with lists.

provideStore({ pizza: entityReducer('pizza') })

const entity = thie.entityService<Pizza>('pizza', this.pizzaService);
entity.query();

const collection$ = this.store.select(state =&gt; state.pizza.collection);

dzNavitski

import React from 'react';

function onlyChild(children) {
  return Array.isArray(children) ? children[0] : children;
}

export function combineContext(contexts) {
  class Provider extends React.Component {
    render() {
      const init = this.props.children;