diff --git a/package.json b/package.json
index a4df77d..985b265 100644
--- a/package.json
+++ b/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",
diff --git a/src/public/js/actions/actionCreators.js b/src/public/js/actions/actionCreators.js
new file mode 100644
index 0000000..f85e3de
--- /dev/null
+++ b/src/public/js/actions/actionCreators.js
@@ -0,0 +1,7 @@
+// Select Movie
+export function selectMovie(index) {
+ return {
+ type: "SELECT_MOVIE",
+ index
+ }
+}
diff --git a/src/public/js/app.js b/src/public/js/app.js
index 3651d3a..66e178d 100644
--- a/src/public/js/app.js
+++ b/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 (
@@ -13,7 +23,7 @@ class App extends React.Component {
- {this.props.children}
+ {React.cloneElement(this.props.children, this.props)}
@@ -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((
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
),document.getElementById('app'));
diff --git a/src/public/js/movie-list.jsx b/src/public/js/components/movie-list.jsx
similarity index 100%
rename from src/public/js/movie-list.jsx
rename to src/public/js/components/movie-list.jsx
diff --git a/src/public/js/navbar.jsx b/src/public/js/components/navbar.jsx
similarity index 100%
rename from src/public/js/navbar.jsx
rename to src/public/js/components/navbar.jsx
diff --git a/src/public/js/reducers/index.js b/src/public/js/reducers/index.js
new file mode 100644
index 0000000..407dfcb
--- /dev/null
+++ b/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;
diff --git a/src/public/js/reducers/movie-store.js b/src/public/js/reducers/movie-store.js
new file mode 100644
index 0000000..36e48db
--- /dev/null
+++ b/src/public/js/reducers/movie-store.js
@@ -0,0 +1,3 @@
+export default function movieStore(state = {}, action) {
+ return state;
+}
diff --git a/src/public/js/store.js b/src/public/js/store.js
new file mode 100644
index 0000000..7d22292
--- /dev/null
+++ b/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;
diff --git a/yarn.lock b/yarn.lock
index 5913d80..a3237cd 100644
--- a/yarn.lock
+++ b/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"