title: React Stripe - Map State to Props on a stripe injected component?
body: <p>I am trying to connect my redux store to my CheckoutForm which I have setup in react following the strip docs. I want to be able to access redux and dispatch items but I am unsure how to proceed. How do I connect the code below?</p>
  <p><strong>CheckoutForm.js</strong></p>
  <pre><code>...
     render() {
  
        const {stripe} = this.props;
        const {postal, name, paymentMethod, errorMessage} = this.state;
  
        return (
          &lt;div&gt;
            { this.state.showPay ? 
  
            &lt;button onClick={this.payWithCard}&gt;
              Pay with stored card
            &lt;/button&gt;
            :
            &lt;form onSubmit={this.SaveCard}&gt;
              &lt;CardSection /&gt;
            &lt;button&gt;Save Card&lt;/button&gt;
            &lt;/form&gt;
            }
          &lt;/div&gt;
          
        );
      }
    }
  
    export default function InjectedCheckoutForm() {
      return (
        &lt;ElementsConsumer&gt;
          {({ stripe, elements }) =&gt; (
            &lt;CheckoutForm stripe={stripe} elements={elements} /&gt;
          )}
        &lt;/ElementsConsumer&gt;
      );
    }
  </code></pre>
  <p>Usually I would do something like this:</p>
  <pre><code>const mapStateToProps = (state) =&gt; {
  
      const { reducer } = state
       return { reducer }
     };
  
     const mapDispachToProps = dispatch =&gt; {
       return {
         storePaymentIntent: (y) =&gt; dispatch({ type: &quot;PAYMENT_INTENT&quot;, value: y })
       };
     };
    
     export default connect(mapStateToProps, mapDispachToProps)(CheckoutForm);
  </code></pre>
  <p>I have tried the following but it seems I can only pull the initial reducer not once its values have changed.</p>
  <pre><code>import ourReducer from './store/reducer';
  import { createStore } from 'redux';
  const store = createStore(ourReducer);
  ...
  console.log(store.getState().reducer); //GIVES ME NULL VALUES*******
    export default function InjectedCheckoutForm() {
      return (
        &lt;ElementsConsumer&gt;
          {({ stripe, elements }) =&gt; (
            &lt;CheckoutForm stripe={stripe} elements={elements} /&gt;
          )}
        &lt;/ElementsConsumer&gt;
      );
    }
  
    store.subscribe(InjectedCheckoutForm);
  </code></pre>