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?