Upgrade meteor to use new ReduxAdapter (#895)

* Upgraded to latest react-server 0.6.0 * Updated example to use ReduxAdapter * Upgraded to 0.6.1 to remove missing key warnings
redfin · Mar 17, 2017 · 28e2f1f · 28e2f1f
1 parent bf241ff
commit 28e2f1f
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/packages/react-server-examples/meteor-site/package.json b/packages/react-server-examples/meteor-site/package.json
@@ -18,13 +18,14 @@
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
     "react-redux": "^4.4.6",
-    "react-server": "^0.5.1",
+    "react-server": "^0.6.1",
+    "react-server-redux": "^0.6.1",
     "redux": "3.6.0",
     "redux-thunk": "2.1.0",
     "superagent": "1.8.4"
   },
   "devDependencies": {
     "babel-preset-react-server": "^0.4.10",
-    "react-server-cli": "^0.5.1"
+    "react-server-cli": "^0.6.1"
   }
 }
diff --git a/packages/react-server-examples/meteor-site/pages/Homepage.js b/packages/react-server-examples/meteor-site/pages/Homepage.js
@@ -1,8 +1,7 @@
 import { default as React } from "react";
 import { RootElement, TheFold } from "react-server";
 import Q from "q";
-import { Provider } from "react-redux";
-
+import { RootProvider, ReduxAdapter } from "react-server-redux";
 import configureStore from "../stores";
 import { Header, Footer, MeteorMap, MeteorTable } from "../components";
 import { selectSort, fetchPostsIfNeeded } from "../stores/actions";
@@ -22,6 +21,8 @@ export default class Homepage {
 		const sort = params.sort ? params.sort : "name";
 
 		this.meteorStore = configureStore();
+		this.storeAdapter = new ReduxAdapter(this.meteorStore);
+
 		this.storePromise = this.meteorStore.dispatch(fetchPostsIfNeeded())
 			.then(() => this.meteorStore.dispatch(selectSort(sort)));
 
@@ -33,8 +34,8 @@ export default class Homepage {
 			// A basic component
 			<Header />,
 			// More complex container components using redux
-			<RootElement key={1} when={this.storePromise}>
-				<Provider store={this.meteorStore}>
+			<RootProvider store={this.meteorStore}>
+				<RootElement key={1} when={this.storeAdapter.when(['meteors'])}>
 					<div className="row">
 						<div className="col-md-6">
 							<MeteorMap />
@@ -43,8 +44,8 @@ export default class Homepage {
 							<MeteorTable />
 						</div>
 					</div>
-				</Provider>
-			</RootElement>,
+				</RootElement>
+			</RootProvider>,
 			// Mark when we want our js/css to bind on the client side
 			<TheFold />,
 			// A delayed loaded component

diff --git a/packages/react-server-examples/meteor-site/stores/index.js b/packages/react-server-examples/meteor-site/stores/index.js
@@ -1,12 +1,14 @@
-import { createStore, applyMiddleware } from "redux";
+import { createStore, applyMiddleware, compose } from "redux";
 import thunkMiddleware from "redux-thunk";
 import reducers from "./reducers";
 
+const composeEnhancers = typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
 const configureStore = (preloadedState) => {
 	const store = createStore(
 		reducers,
 		preloadedState,
-		applyMiddleware(thunkMiddleware)
+		composeEnhancers(applyMiddleware(thunkMiddleware))
 	);
 
 	// https://github.com/reactjs/react-redux/releases/tag/v2.0.0