Add react-redux to the party

package.json

@@ -16,7 +16,10 @@
         "jquery": "^2.2.4",
         "react": "^15.3.2",
         "react-dom": "^15.3.2",
-        "react-router": "^3.0.0"
+        "react-redux": "^4.4.6",
+        "react-router": "^3.0.0",
+        "react-router-redux": "^4.0.7",
+        "redux": "^3.6.0"
     },
     "devDependencies": {
         "axios": "^0.15.2",

src/public/js/actions/actionCreators.js

@@ -0,0 +1,7 @@
+// Select Movie
+export function selectMovie(index) {
+  return {
+    type: "SELECT_MOVIE",
+    index
+  }
+}

src/public/js/app.js

@@ -1,10 +1,20 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import NavBar from './navbar.jsx'
-import MovieList from './movie-list.jsx'
 import { Router, Route, IndexRoute, Link, hashHistory } from 'react-router'
+import { Provider } from 'react-redux'
 
-class App extends React.Component {
+import rootReducer from './reducers/index'
+import store, { history } from './store'
+
+import NavBar from './components/navbar.jsx'
+import MovieList from './components/movie-list.jsx'
+import UserLoginForm from './components/user-login.jsx'
+
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import * as actionCreators from './actions/actionCreators'
+
+class Main extends React.Component {
   render() {
     return (
       <div>
@@ -13,7 +23,7 @@ class App extends React.Component {
         </div>
         <div className="container-fluid">
           <div className="container">
-            {this.props.children}
+            {React.cloneElement(this.props.children, this.props)}
           </div>
         </div>
       </div>
@@ -21,11 +31,26 @@ class App extends React.Component {
   }
 }
 
+function mapStateToProps(state) {
+  return {
+    movieStore: state.movieStore,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(actionCreators, dispatch);
+}
+
+const App = connect(mapStateToProps, mapDispatchToProps)(Main);
+
 ReactDOM.render((
-  <Router history={hashHistory}>
+  <Provider store={store}>
+    <Router history={history}>
       <Route path="/" component={App}>
+        <Route path="/users/login" component={UserLoginForm} />
         <IndexRoute component={MovieList} />
         <Route path="/movies/popular" component={MovieList} />
       </Route>
     </Router>
+  </Provider>
 ),document.getElementById('app'));

src/public/js/reducers/index.js

@@ -0,0 +1,11 @@
+import { combineReducers } from 'redux';
+import { routerReducer } from 'react-router-redux'
+
+import movieStore from './movie-store'
+
+const rootReducer = combineReducers({
+  routing: routerReducer,
+  movieStore
+})
+
+export default rootReducer;

src/public/js/reducers/movie-store.js

@@ -0,0 +1,3 @@
+export default function movieStore(state = {}, action) {
+  return state;
+}

src/public/js/store.js

@@ -0,0 +1,23 @@
+import { createStore, compose } from 'redux';
+import { syncHistoryWithStore } from 'react-router-redux'
+import { browserHistory } from 'react-router'
+
+// Import the root reducer
+import rootReducer from './reducers/index'
+
+// Set the default state
+const defaultState = {
+  movieStore: {
+    movies: [],
+    selectedMovie: {},
+    selectedMovieIndex: 0,
+  },
+};
+
+// Export the store
+const store = createStore(rootReducer, defaultState);
+
+// Sync history with store
+export const history = syncHistoryWithStore(browserHistory, store);
+
+export default store;

yarn.lock

@@ -1577,7 +1577,7 @@ hoek@2.x.x:
   version "2.16.3"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
 
-hoist-non-react-statics@^1.2.0:
+hoist-non-react-statics@^1.0.3, hoist-non-react-statics@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
 
@@ -1672,7 +1672,7 @@ interpret@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.1.tgz#d579fb7f693b858004947af39fa0db49f795602c"
 
-invariant@^2.2.0, invariant@^2.2.1:
+invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.1.tgz#b097010547668c7e337028ebe816ebe36c8a8d54"
   dependencies:
@@ -1950,6 +1950,10 @@ loader-utils@^0.2.11:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
+lodash-es@^4.2.1:
+  version "4.17.0"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.0.tgz#b94e3ba146a914b6513e9c302cc59cc6be6c7e79"
+
 lodash._basecopy@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36"
@@ -2089,6 +2093,10 @@ lodash@^4.2.0:
   version "4.16.6"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.16.6.tgz#d22c9ac660288f3843e16ba7d2b5d06cca27d777"
 
+lodash@^4.2.1:
+  version "4.17.0"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.0.tgz#93f4466e5ab73e5a1f1216c34eea11535f0a8df5"
+
 lodash@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-1.0.2.tgz#8f57560c83b59fc270bd3d561b690043430e2551"
@@ -2557,6 +2565,15 @@ react-dom@^15.3.2:
   version "15.3.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.3.2.tgz#c46b0aa5380d7b838e7a59c4a7beff2ed315531f"
 
+react-redux:
+  version "4.4.6"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-4.4.6.tgz#4b9d32985307a11096a2dd61561980044fcc6209"
+  dependencies:
+    hoist-non-react-statics "^1.0.3"
+    invariant "^2.0.0"
+    lodash "^4.2.0"
+    loose-envify "^1.1.0"
+
 react-router:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-3.0.0.tgz#3f313e4dbaf57048c48dd0a8c3cac24d93667dff"
@@ -2567,6 +2584,10 @@ react-router:
     loose-envify "^1.2.0"
     warning "^3.0.0"
 
+react-router-redux:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/react-router-redux/-/react-router-redux-4.0.7.tgz#9b1fde4e70106c50f47214e12bdd888cfb96e2a6"
+
 react@^15.3.2:
   version "15.3.2"
   resolved "https://registry.yarnpkg.com/react/-/react-15.3.2.tgz#a7bccd2fee8af126b0317e222c28d1d54528d09e"
@@ -2665,6 +2686,15 @@ redent@^1.0.0:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
+redux:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-3.6.0.tgz#887c2b3d0b9bd86eca2be70571c27654c19e188d"
+  dependencies:
+    lodash "^4.2.1"
+    lodash-es "^4.2.1"
+    loose-envify "^1.1.0"
+    symbol-observable "^1.0.2"
+
 regenerate@^1.2.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
@@ -2933,6 +2963,10 @@ supports-color@^3.1.0:
   dependencies:
     has-flag "^1.0.0"
 
+symbol-observable@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"
+
 tapable@^0.1.8, tapable@~0.1.8:
   version "0.1.10"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4"