Remove the global state containing everything

src/public/js/app.js

@@ -28,7 +28,7 @@ import { Router } from 'react-router'
 import { routerActions } from 'react-router-redux'
 
 // Action creators
-import * as actionCreators from './actions/actionCreators'
+import { dismissAlert } from './actions/actionCreators'
 
 // Store
 import store, { history } from './store'
@@ -42,23 +42,21 @@ import getRoutes from './routes'
 
 function mapStateToProps(state) {
   return {
-    movieStore: state.movieStore,
-    showStore: state.showStore,
-    userStore: state.userStore,
+    username: state.userStore.username,
     torrentCount: state.torrentStore.torrents.length,
     alerts: state.alerts,
   }
 }
 
 function mapDispatchToProps(dispatch) {
-  return bindActionCreators(actionCreators, dispatch);
+  return bindActionCreators({ dismissAlert }, dispatch);
 }
 
 function Main(props) {
   return (
     <div>
       <NavBar
-        username={props.userStore.username}
+        username={props.username}
         router={props.router}
         torrentCount={props.torrentCount}
       />
@@ -67,7 +65,7 @@ function Main(props) {
         dismissAlert={props.dismissAlert}
       />
       <div className="container-fluid">
-        {React.cloneElement(props.children, props)}
+        {props.children}
       </div>
     </div>
   );

src/public/js/components/movies/list.js

@@ -1,4 +1,7 @@
 import React from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import * as actionCreators from '../../actions/actionCreators'
 
 import DownloadButton from '../buttons/download'
 import TorrentsButton from './torrents'
@@ -6,6 +9,12 @@ import ActionsButton from './actions'
 import ListPosters from '../list/posters'
 import ListDetails from '../list/details'
 
+function mapStateToProps(state) {
+  return { movieStore: state.movieStore };
+}
+const mapDispatchToProps = (dipatch) =>
+  bindActionCreators(actionCreators, dipatch)
+
 function MovieButtons(props) {
   const imdb_link = `http://www.imdb.com/title/${props.movie.imdb_id}`;
   const hasMovie = (props.movie.polochon_url !== "");
@@ -16,7 +25,6 @@ function MovieButtons(props) {
         movieId={props.movie.imdb_id}
         getDetails={props.getMovieDetails}
         deleteMovie={props.deleteMovie}
-        isUserAdmin={props.isUserAdmin}
         hasMovie={hasMovie}
         wishlisted={props.movie.wishlisted}
         addToWishlist={props.addToWishlist}
@@ -44,7 +52,7 @@ function MovieButtons(props) {
   );
 }
 
-export default class MovieList extends React.Component {
+class MovieList extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -84,7 +92,6 @@ export default class MovieList extends React.Component {
               getMovieDetails={this.props.getMovieDetails}
               addTorrent={this.props.addTorrent}
               deleteMovie={this.props.deleteMovie}
-              isUserAdmin={this.props.userStore.isAdmin}
               addToWishlist={this.props.addMovieToWishlist}
               deleteFromWishlist={this.props.deleteMovieFromWishlist}
               fetchMovies={this.props.fetchMovies}
@@ -96,3 +103,4 @@ export default class MovieList extends React.Component {
     );
   }
 }
+export default connect(mapStateToProps, mapDispatchToProps)(MovieList);

src/public/js/components/shows/details.js

@@ -1,11 +1,20 @@
 import React from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import * as actionCreators from '../../actions/actionCreators'
 
 import Loader from '../loader/loader'
 import DownloadButton from '../buttons/download'
 
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 
-export default class ShowDetails extends React.Component {
+function mapStateToProps(state) {
+  return { showStore: state.showStore };
+}
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators(actionCreators, dispatch)
+
+class ShowDetails extends React.Component {
   componentWillMount() {
     this.props.fetchShowDetails(this.props.params.imdbId);
   }
@@ -32,6 +41,7 @@ export default class ShowDetails extends React.Component {
     );
   }
 }
+export default connect(mapStateToProps, mapDispatchToProps)(ShowDetails);
 
 function Header(props){
   return (

src/public/js/components/shows/list.js

@@ -1,10 +1,19 @@
 import React from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import * as actionCreators from '../../actions/actionCreators'
 
 import ListDetails from '../list/details'
 import ListPosters from '../list/posters'
 import ShowButtons from './listButtons'
 
-export default class ShowList extends React.Component {
+function mapStateToProps(state) {
+  return { showStore: state.showStore };
+}
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators(actionCreators, dispatch)
+
+class ShowList extends React.Component {
   componentWillMount() {
     if (this.props.showsUrl) {
       this.props.fetchShows(this.props.showsUrl);
@@ -54,3 +63,4 @@ export default class ShowList extends React.Component {
     );
   }
 }
+export default connect(mapStateToProps, mapDispatchToProps)(ShowList);

src/public/js/components/torrents/list.js

@@ -6,8 +6,8 @@ import { addTorrent } from '../../actions/actionCreators'
 function mapStateToProps(state) {
   return { torrents: state.torrentStore.torrents };
 }
-const mapDispatchToProps = (dipatch) =>
-  bindActionCreators({ addTorrent }, dipatch)
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({ addTorrent }, dispatch)
 
 class TorrentList extends React.PureComponent {
   render() {