fix first hack - store is no longer global. Please see reduxjs/react-redux#108 for more details

Author: joeyfreund

src/client.js

@@ -1,9 +1,12 @@
 // Client (i.e. frontend) application entry point (i.e. main)
 import React from 'react';
-import {Provider} from 'react-redux';
 import {render} from 'react-dom';
 import { Router, Route, hashHistory, IndexRoute } from 'react-router'
 
+import { createStore } from 'redux';
+import {Provider} from 'react-redux';
+import reducer from './reducers/reducer.js'
+
 import App from './components/app.js';
 import Home from './components/home.js';
 import Catalog from './components/catalog/catalog.js';
@@ -26,7 +29,7 @@ import ProductPage from './components/product_page.js';
 //             which does a smart diff and touches the DOM only if it needs to).
 
 
-var store = require('./store.js');
+var store = createStore(reducer);
 
 render(
   <Provider store={store}>

src/components/catalog/catalog.js

@@ -4,29 +4,30 @@ import SearchBar from './search_bar.js';
 
 require('isomorphic-fetch');
 
-var reduxStore = require('../../store.js');
-
 
 // A component that stores data (as its internal state).
 // The data is passes to view-only component(s) as properties.
 // The render() method simply sets the properties of view-only components.
 export default class Catalog extends React.Component {
 
 
-  constructor(){
-    super();
-    reduxStore.subscribe(() => {
+  constructor(props, context){
+    super(props, context);
+    this.store = this.context.store;
+    this.shouldDisplay = this.shouldDisplay.bind(this);
+
+    this.store.subscribe(() => {
       // FIXME: We need to use render(), not forceUpdate().
       //        See comment in src/client.js
       this.forceUpdate();
     });
 
-    this.shouldDisplay = this.shouldDisplay.bind(this);
+
   }
 
 
   shouldDisplay(item){
-    let t = reduxStore.getState().filterText.toLowerCase();
+    let t = this.store.getState().filterText.toLowerCase();
     return item.brand.toLowerCase().includes(t) ||
          item.name.toLowerCase().includes(t);
   }
@@ -36,7 +37,7 @@ export default class Catalog extends React.Component {
     fetch(this.props.getUrl)
       .then(res => res.json())
       .then(json => {
-        reduxStore.dispatch({type: 'ITEMS_UPDATED', items: json.items});
+        this.store.dispatch({type: 'ITEMS_UPDATED', items: json.items});
       })
       .catch(err => {
         // TODO: Change the state of this component, to indicate an error
@@ -47,9 +48,9 @@ export default class Catalog extends React.Component {
 
 
   render() {
-    let displayedItems = reduxStore.getState().items.filter(this.shouldDisplay);
+    let displayedItems = this.store.getState().items.filter(this.shouldDisplay);
     let onTextChanged = (t) => {
-      reduxStore.dispatch({type: 'FILTER_TEXT_CHANGED', filterText: t});
+      this.store.dispatch({type: 'FILTER_TEXT_CHANGED', filterText: t});
     };
 
     return (
@@ -71,3 +72,9 @@ Catalog.propTypes = {
 Catalog.defaultProps = {
   getUrl: '/api/v1/products'
 };
+
+// This will make this.context available.
+// The store will be provided by the Provider component.
+Catalog.contextTypes = {
+  store: React.PropTypes.object.isRequired
+};