More thunk removal. #550

Author: davidkpiano

Diff for: docs/guides/faqs.md

@@ -0,0 +1,58 @@
+# Frequently Asked Questions
+
+This list will be updated frequently!
+
+### How do you add conditional class names based on field state?
+
+Use the `mapProps={{...}}` property on `<Control>` components to set any props on the control component based on field state, like this:
+
+```jsx
+<Control.text
+  model="user.firstName"
+  mapProps={{
+    className: ({fieldValue}) => fieldValue.focus
+      ? 'focused'
+      : ''
+  }}
+/>
+```
+
+The props that are provided to each function value in your `mapProps` mapping are:
+- `modelValue`
+- `fieldValue`
+- `onFocus`
+- `onBlur`
+- `onChange`
+
+as well as other additional props:
+- all props on the `<Control>`
+- all props on the `controlProps={{...}}` prop (if any)
+- `onKeyPress`
+- `viewValue`
+
+### How do you validate across fields?
+
+Validation across fields becomes a higher form-level concern, which follows Redux's general tree-structure data flow pattern. If you want a reusable group of fields that are validated, you can **nest forms** as long as you set the form's `component="..."` prop to something other than `"form"` (because you can't nest forms in HTML). [See this issue response for more information.](https://github.com/davidkpiano/react-redux-form/issues/545#issuecomment-261944846) Here's an example:
+
+```jsx
+import { Form, Control } from 'react-redux-form';
+
+const isOver18 = (day, month, year) => { ... };
+
+const BirthDate = ({forModel}) => (
+  <Form
+    model={`${forModel}.birth`}
+    component="div"
+    validators={{
+      '': ({day, month, year}) => isOver18(day, month, year),
+    }}
+  >
+    <Control model=".day" placeholder="Day" />
+    <Control model=".month" placeholder="Month" />
+    <Control model=".year" placeholder="Year" />
+  </Form> 
+);
+
+export default BirthDate;
+```
+

Diff for: docs/recipes/redux-form.md

@@ -0,0 +1,18 @@
+## Redux Form Examples
+
+These examples are implementations of the examples from [Redux-Form](http://redux-form.com/6.2.1/examples), shown for comparison.
+
+### Simple Form
+
+<p data-height="300" data-theme-id="13607" data-slug-hash="e384d9c541679c8141979c590ac24d80" data-default-tab="js,result" data-user="davidkpiano" data-embed-version="2" data-pen-title="RRF - Simple Form" data-editable="true" class="codepen">See the Pen <a href="http://codepen.io/davidkpiano/pen/e384d9c541679c8141979c590ac24d80/">RRF - Simple Form</a> by David Khourshid (<a href="http://codepen.io/davidkpiano">@davidkpiano</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+
+### Synchronous Validation
+
+<p data-height="300" data-theme-id="13607" data-slug-hash="381bb491da76e74305f5d2851644fbbf" data-default-tab="js,result" data-user="davidkpiano" data-embed-version="2" data-pen-title="RRF - Synchronous Validation" data-editable="true" class="codepen">See the Pen <a href="http://codepen.io/davidkpiano/pen/381bb491da76e74305f5d2851644fbbf/">RRF - Synchronous Validation</a> by David Khourshid (<a href="http://codepen.io/davidkpiano">@davidkpiano</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+
+### Submit Validation
+
+<p data-height="300" data-theme-id="13607" data-slug-hash="c683e0cf7ee54736b49b2ce30aba956f" data-default-tab="js,result" data-user="davidkpiano" data-embed-version="2" data-pen-title="RRF - Submit Validation" data-editable="true" class="codepen">See the Pen <a href="http://codepen.io/davidkpiano/pen/c683e0cf7ee54736b49b2ce30aba956f/">RRF - Submit Validation</a> by David Khourshid (<a href="http://codepen.io/davidkpiano">@davidkpiano</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

Diff for: test/custom-control-component-spec.js

@@ -2,11 +2,10 @@
 import { assert } from 'chai';
 import React, { Component, PropTypes } from 'react';
 import TestUtils from 'react-addons-test-utils';
-import { applyMiddleware, combineReducers, createStore } from 'redux';
 import { Provider } from 'react-redux';
-import thunk from 'redux-thunk';
 
 import { modelReducer, formReducer, Control } from '../src';
+import { testCreateStore } from './utils';
 
 describe('custom <Control /> components', () => {
   class CustomText extends Component {
@@ -72,10 +71,10 @@ describe('custom <Control /> components', () => {
   MinifiedText.propTypes = { onChange: PropTypes.function };
 
   it('should handle custom prop mappings', () => {
-    const store = applyMiddleware(thunk)(createStore)(combineReducers({
+    const store = testCreateStore({
       testForm: formReducer('test'),
       test: modelReducer('test', { foo: 'bar' }),
-    }));
+    });
 
     const field = TestUtils.renderIntoDocument(
       <Provider store={store}>
@@ -101,10 +100,10 @@ describe('custom <Control /> components', () => {
   });
 
   it('should handle string prop mappings', () => {
-    const store = applyMiddleware(thunk)(createStore)(combineReducers({
+    const store = testCreateStore({
       testForm: formReducer('test'),
       test: modelReducer('test', { foo: 'bar' }),
-    }));
+    });
 
     const field = TestUtils.renderIntoDocument(
       <Provider store={store}>
@@ -127,10 +126,10 @@ describe('custom <Control /> components', () => {
   });
 
   it('should work with minified components (no displayName)', () => {
-    const store = applyMiddleware(thunk)(createStore)(combineReducers({
+    const store = testCreateStore({
       testForm: formReducer('test'),
       test: modelReducer('test', { foo: 'bar' }),
-    }));
+    });
 
     const field = TestUtils.renderIntoDocument(
       <Provider store={store}>
@@ -153,10 +152,10 @@ describe('custom <Control /> components', () => {
   });
 
   it('should work with custom checkboxes', () => {
-    const store = applyMiddleware(thunk)(createStore)(combineReducers({
+    const store = testCreateStore({
       testForm: formReducer('test'),
       test: modelReducer('test', { foo: true }),
-    }));
+    });
 
     const field = TestUtils.renderIntoDocument(
       <Provider store={store}>
@@ -177,10 +176,10 @@ describe('custom <Control /> components', () => {
   });
 
   it('should work with custom checkboxes (multi)', () => {
-    const store = applyMiddleware(thunk)(createStore)(combineReducers({
+    const store = testCreateStore({
       testForm: formReducer('test'),
       test: modelReducer('test', { items: [1, 2, 3] }),
-    }));
+    });
 
     const field = TestUtils.renderIntoDocument(
       <Provider store={store}>
@@ -230,10 +229,10 @@ describe('custom <Control /> components', () => {
   });
 
   it('should pass event to asyncValidator', (done) => {
-    const store = applyMiddleware(thunk)(createStore)(combineReducers({
+    const store = testCreateStore({
       testForm: formReducer('test'),
       test: modelReducer('test', { foo: '' }),
-    }));
+    });
 
     class TextInput extends React.Component {
       render() {
@@ -289,10 +288,10 @@ describe('custom <Control /> components', () => {
   });
 
   it('should pass fieldValue in mapProps', () => {
-    const store = applyMiddleware(thunk)(createStore)(combineReducers({
+    const store = testCreateStore({
       testForm: formReducer('test'),
       test: modelReducer('test', { foo: '' }),
-    }));
+    });
 
     class TextInput extends React.Component {
       render() {