Update React component by dispatching action from non-react component
<p>I'm trying to update the cart-button on a project when the user adds an item to the cart.</p>

<p>I have build parts of the site in React.js - like the cart, the cart button etc. </p>

<p><strong>configureStore.js:</strong></p>

<pre><code>export default function configureStore(initialState) {
      const store = createStore(
        reducers,
        initialState
      return store
    }
</code></pre>

<p><strong>Action:</strong></p>

<pre><code>export function updateCart(payload) {
    return {
        type: CART_UPDATE,
        payload: payload
    }
}
</code></pre>

<p><strong>Reducer:</strong> </p>

<pre><code>export default function cart(state = {}, action) {

    switch (action.type) {

            case CART_UPDATE:

            const   cart = {
                        data: action.payload.cart,
                        errors: action.payload.errors,
                        isFetching: false
                    };

            return {
                ...state,
                ...cart
            };

    return state;
}
</code></pre>

<p><strong>CartButton.js</strong></p>

<pre><code>... componnent etc.

function mapStateToProps(state) {
    return {
        cart: state.cart.data
    };
}

export default connect(mapStateToProps)(CartButton);
</code></pre>

<p><strong>Provider</strong></p>

<pre><code>import configureStore from './store/configureStore'
var store = configureStore();

ReactDOM.render((&lt;Provider store={store}&gt;&lt;Cart showControls={true} /&gt;&lt;/Provider&gt;), document.getElementById('react-cart'));
</code></pre>

<p>I'm dispatching an action that is supposed to update the cart quantity from a non-react component like this:</p>

<pre><code>// imports 
import { dispatch } from 'redux';
import { updateCart } from '../../actions/cart_actions';
import configureStore from '../../store/configureStore'
var store = configureStore();
</code></pre>

<p>and then..</p>

<pre><code>store.dispatch(updateCart(response));
</code></pre>

<p>The <strong>action is dispatched</strong> and the <strong>state is updated</strong>. The cart-button component is connected via. react-redux connect() function. But somehow it isn't updating the component with the new quantity.</p>

<p>When I dispatch an action from within my cart React component it works fine.</p>

<p>I might be missing something obvious. Any suggestions?</p>