Redux store not updating using React

Question

Im using Redux to hold the data in a global state, which is updated based off the actions of the user. When the user clicks a button, it is supposed to update the state, and display the current state onto the button. Instead, the initial remains displays with no change. I've listed my components and reducer below.

Main Component:

import React, { Component, PropTypes } from 'react';
import Picture from '../../components/picture.jsx';
import ShoppingCart from '../../components/shoppingcart.jsx';
import { browserHistory } from 'react-router';
import { createStore } from 'redux';
import cart from '../../reducers/index.js';
var flag = false;
const store = createStore(cart); 


export default class Products extends Component {

    constructor(props) {
      super(props);
      this.state = {clothingData: 0}
    }

    componentWillMount() {
      fetch('/t')
      .then((result) => {
         return result.json();
       })
      .then((re) => {
        flag = true;
        this.setState({ clothingData: re });
      })
      .catch(function(error){
        console.log(error);
      });
    }

    componentDidMount(){
        fetch('/ship')
        .then((result) => {
         return result.json();
        })
        .then((res) => {
         console.log(res);
        })
        .catch(function(error){
         console.log(error);
      });
    }

    render(){
    if (!flag){ 
    return (
      <div>
      </div>
    );
    }
    else{
        //console.log(this.state.clothingData[0].path);
        //console.log(this.state.clothingData[0].fileName);
        //console.log(this.state.clothingData);
        return (
      <div>
        <Picture src = {this.state.clothingData} onClick = { () => {browserHistory.push('/Product'); }} name = {"joe"} />
        <ShoppingCart value={ store.getState() } onIncrement={() => store.dispatch({ type: 'INCREMENT' })} />
      </div>
    );
    }
 }

}

Shopping Cart Component:

import React, { Component, PropTypes } from 'react';
export default class ShoppingCart extends Component {
    render(){
      const { onIncrement } = this.props
    return(
      <div>
       <button onClick = {onIncrement}> {this.props.value} </button>
      </div>
    );
  }
}

Reducer:

export default (state = 2, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

Answer 1

Out the box redux has no relation to any library (like Angular, or React, ...etc). You have to manually bind redux to your application.

Here are the instructions for binding redux to react.

Official React bindings for Redux.

React Redux API

Minimal Example

Answer 2

Since you're using Redux, have you considered integrating it with React using the react-redux bindings?

Triggering the action through the store like that is not considered best practice, as you can see in this comment .

Check out the Provider component.