From 535727fdab5d9c63556585c6d55086c49612ab6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= Date: Mon, 14 Nov 2016 14:46:39 +0100 Subject: [PATCH] Add react-redux to the party --- package.json | 5 ++- src/public/js/actions/actionCreators.js | 7 +++ src/public/js/app.js | 45 ++++++++++++++----- src/public/js/{ => components}/movie-list.jsx | 0 src/public/js/{ => components}/navbar.jsx | 0 src/public/js/reducers/index.js | 11 +++++ src/public/js/reducers/movie-store.js | 3 ++ src/public/js/store.js | 23 ++++++++++ yarn.lock | 38 +++++++++++++++- 9 files changed, 119 insertions(+), 13 deletions(-) create mode 100644 src/public/js/actions/actionCreators.js rename src/public/js/{ => components}/movie-list.jsx (100%) rename src/public/js/{ => components}/navbar.jsx (100%) create mode 100644 src/public/js/reducers/index.js create mode 100644 src/public/js/reducers/movie-store.js create mode 100644 src/public/js/store.js 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"