Update React component by dispatching action from non-react component

Question

I'm trying to update the cart-button on a project when the user adds an item to the cart.

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

configureStore.js:

export default function configureStore(initialState) {
      const store = createStore(
        reducers,
        initialState
      return store
    }

Action:

export function updateCart(payload) {
    return {
        type: CART_UPDATE,
        payload: payload
    }
}

Reducer:

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;
}

CartButton.js

... componnent etc.

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

export default connect(mapStateToProps)(CartButton);

Provider

import configureStore from './store/configureStore'
var store = configureStore();

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

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

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

and then..

store.dispatch(updateCart(response));

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

When I dispatch an action from within my cart React component it works fine.

I might be missing something obvious. Any suggestions?

Are you absolutely sure that you're calling dispatch on the same store that is passed to your <Provider /> ? — rossipedia
As rossipedia said, did you instantiate only one store, or did you call createStore several times? — VonD
I'm pretty sure that I am using the exact same store. I have updated with more detailed code snippets. I can't understand why it isn't updating. As I mention in the post; the quantity in CartButton.js is updating when I'm updating from the Cart.js-component. — Rasmus Wølk
I tried setting shouldComponentUpdate() { return true; } in my CartButton.js component but still no luck. — Rasmus Wølk
Uh, your code pretty much shows you're creating two stores. One in your "Provider" part, and one in the "imports..and then" part. This isn't too difficult to test, set a breakpoint in your mapStateToProps function and see if your new expected state is ever passed to your component. — Sacho

Rasmus Wølk Rasmus Wølk · Accepted Answer · 2016-04-07T11:28:09

So what I ended up figuring out is that you shouldn't define your store in more than one place.

I simply imported the store constant from my root app.js-file like this:

import { store } from './app';

Update React component by dispatching action from non-react component

1 Answers