Redux configuration (#122)

frontend/index.js

@@ -1,5 +0,0 @@
-import { run } from './router';
-
-if (typeof window !== 'undefined') {
-  run();
-}

frontend/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { render } from 'react-dom';
+import routes from './router';
+import store from './redux/store';
+
+if (typeof window !== 'undefined') {
+  const { document } = global;
+  const app = document.getElementById('app');
+  const reactReduxApp = (
+    <Provider store={store}>
+      {routes}
+    </Provider>
+  );
+
+  render(reactReduxApp, app);
+}

frontend/redux/nodes/app/reducer.js

@@ -0,0 +1,5 @@
+const reducer = (state = {}) => {
+  return state;
+};
+
+export default reducer;

frontend/redux/reducers.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux';
+import { routerReducer } from 'react-router-redux';
+import app from './nodes/app/reducer';
+
+export default combineReducers({
+  app,
+  routing: routerReducer,
+});

frontend/redux/store.js

@@ -0,0 +1,19 @@
+import { createStore, applyMiddleware, compose } from 'redux';
+import thunkMiddleware from 'redux-thunk';
+import { browserHistory } from 'react-router';
+import { routerMiddleware } from 'react-router-redux';
+import reducers from './reducers';
+
+const initialState = {};
+const middleware = [
+  thunkMiddleware,
+  routerMiddleware(browserHistory),
+];
+const appliedMiddleware = applyMiddleware(...middleware);
+
+const store = createStore(
+  reducers,
+  initialState,
+  compose(appliedMiddleware),
+);
+export default store;

frontend/router/index.jsx

@@ -1,35 +1,15 @@
 import React from 'react';
-import { render } from 'react-dom';
 import { Router, Route, browserHistory } from 'react-router';
-import { Promise } from 'when';
+import { syncHistoryWithStore } from 'react-router-redux';
 import App from '../components/app';
+import store from '../redux/store';
 
-const window = global.window || {};
-const document = global.document || {};
+const history = syncHistoryWithStore(browserHistory, store);
 
-export function run() {
-  window.Promise = window.Promise || Promise;
-  window.self = window;
+const routes = (
+  <Router history={history}>
+    <Route path="/" component={App} />
+  </Router>
+);
 
-  const router = (
-    <Router history={browserHistory}>
-      <Route path="/" component={App} />
-    </Router>
-  );
-
-  render(router, document.getElementById('app'));
-}
-
-// Style live reloading
-if (module.hot) {
-  let c = 0;
-  module.hot.accept('#css', () => {
-    const a = document.createElement('a');
-    const link = document.querySelector('link[rel="stylesheet"]');
-    a.href = link.href;
-    a.search = `?${c++}`;
-    link.href = a.href;
-  });
-}
-
-export default { run };
+export default routes;

package.json

@@ -38,7 +38,11 @@
     "proxy-middleware": "^0.15.0",
     "react": "^15.2.1",
     "react-dom": "^15.2.1",
-    "react-router": "^2.6.1",
+    "react-redux": "^4.4.5",
+    "react-router": "^2.7.0",
+    "react-router-redux": "^4.0.5",
+    "redux": "^3.6.0",
+    "redux-thunk": "^2.1.0",
     "style-loader": "^0.13.0",
     "stylus-loader": "1.5.1",
     "webpack": "1.13.1",

webpack.config.js

@@ -38,7 +38,7 @@ var repo = __dirname
 
 var config  = {
   entry: {
-    bundle: path.join(repo, 'frontend/index.js')
+    bundle: path.join(repo, 'frontend/index.jsx')
   },
   output: {
     path: path.join(repo, 'build'),