title: How to connect simple Formik form with Redux store and dispatch an action?
body: <p>I'm new at react/redux, but can realize some simple addProduct form for my app. 
  Today I tried to replace it with <a href="https://github.com/jaredpalmer/formik" rel="noreferrer">Formik</a> from this <a href="https://codesandbox.io/s/zKrK5YLDZ" rel="noreferrer">Basic demo</a>, but I cant't understand where should I place "dispatch" function (I tried it to everywhere). </p>
  
  <p>May be I use connect in wrong way? </p>
  
  <p>My new component is exactly like in <a href="https://github.com/jaredpalmer/formik" rel="noreferrer">Demo</a>, except I replaced email with productName (and other additional fields). But I can't understand how to pass "values" from Formik to Redux store. </p>
  
  <p>My old form component, without Formik, looks like this: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { connect } from 'react-redux';
  import { addProduct } from '../actions';
  
  const AddProduct0 = ({ dispatch }) =&gt; {
    let inputSKUNumber;
    let inputProductName;
    return (
      &lt;div&gt;
        &lt;input
          ref={(node) =&gt; {
            inputSKUNumber = node;
          }}
          placeholder="SKU Number"
        /&gt;
        &lt;input
          ref={(node) =&gt; {
            inputProductName = node;
          }}
          placeholder="Product name"
        /&gt;
        &lt;button
          onClick={() =&gt; {
            dispatch(addProduct({ SKUNumber: inputSKUNumber.value, name: inputProductName.value }));
            inputSKUNumber.value = '';
            inputProductName.value = '';
          }}
        &gt;
          Add Product
        &lt;/button&gt;
      &lt;/div&gt;
    );
  };
  const AddProduct = connect()(AddProduct0);
  
  export default AddProduct;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My new component with formik looks like this: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { connect } from 'react-redux';
  import { withFormik } from 'formik';
  import Yup from 'yup';
  import { addProduct } from '../actions';
  import './helper.css';
  
  // Our inner form component. Will be wrapped with Formik({..})
  const MyInnerForm = (props) =&gt; {
    const {
      values,
      touched,
      errors,
      dirty,
      isSubmitting,
      handleChange,
      handleBlur,
      handleSubmit,
      handleReset,
    } = props;
    return (
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;label htmlFor="SKUNumber"&gt;SKU Number&lt;/label&gt;
        &lt;input
          id="SKUNumber"
          placeholder="SKU Number"
          type="number"
          value={values.SKUNumber}
          onChange={handleChange}
          onBlur={handleBlur}
          className={errors.SKUNumber &amp;&amp; touched.SKUNumber ? 'text-input error' : 'text-input'}
        /&gt;
        &lt;div className="input-feedback"&gt;{touched.SKUNumber ? errors.SKUNumber : ''}&lt;/div&gt;
  
        &lt;label htmlFor="productName"&gt;Product Name&lt;/label&gt;
        &lt;input
          id="productName"
          placeholder="Product Name"
          type="text"
          value={values.productName}
          onChange={handleChange}
          onBlur={handleBlur}
          className={errors.productName &amp;&amp; touched.productName ? 'text-input error' : 'text-input'}
        /&gt;
        &lt;div className="input-feedback"&gt;{touched.productName ? errors.productName : ''}&lt;/div&gt;
  
  
        &lt;button
          type="button"
          className="outline"
          onClick={handleReset}
          disabled={!dirty || isSubmitting}
        &gt;
          Reset
        &lt;/button&gt;
        &lt;button type="submit" disabled={isSubmitting}&gt;
          Submit
        &lt;/button&gt;
  
        &lt;DisplayFormikState {...props} /&gt;
      &lt;/form&gt;
    );
  };
  
  const EnhancedForm = withFormik({
    mapPropsToValues: () =&gt; ({
      SKUNumber: 12345678,
      productName: 'Default Product',
    }),
  
    validationSchema: Yup.object().shape({
      SKUNumber: Yup.number()
        .max(99999999, 'SKU Number must be less than 8 digits')
        .required('SKU Number is required!'),
  
      productName: Yup.string()
        .min(5, 'Product name must be longer than 5 symbols')
        .max(50, 'Product name must be shorter than 50 symbols')
        .required('Product name is required!'),
  
    handleSubmit: (values, { setSubmitting }) =&gt; {
      setTimeout(() =&gt; {
        alert(JSON.stringify(values, null, 2));
        setSubmitting(false);
      }, 1000);
      // dispatch(addProduct(values));
    },
    displayName: 'BasicForm', // helps with React DevTools
  })(MyInnerForm);
  
  export const DisplayFormikState = props =&gt; (
    &lt;div style={{ margin: '1rem 0' }}&gt;
      &lt;h3 style={{ fontFamily: 'monospace' }} /&gt;
      &lt;pre
        style={{
          background: '#f6f8fa',
          fontSize: '.65rem',
          padding: '.5rem',
        }}
      &gt;
        &lt;strong&gt;props&lt;/strong&gt; = {JSON.stringify(props, null, 2)}
      &lt;/pre&gt;
    &lt;/div&gt;
  );
  
  const AddProduct = connect()(EnhancedForm);
  
  export default AddProduct;</code></pre>
  </div>
  </div>
  </p>
  
  <p>p.s. If someone have reputation here to add tag "formik", please, do it. </p>