Merge pull request #1 from Solshal/setup

improve redux setup

Author: weblancaster

.gitignore

@@ -28,3 +28,5 @@ node_modules
 
 # Bower
 bower_components/
+
+.idea/

manifest.json

@@ -10,6 +10,7 @@
    "default_popup": "index.html"
   },
   "permissions": [
-    "activeTab"
+    "activeTab",
+    "storage"
   ]
 }

package.json

@@ -67,6 +67,8 @@
     "react": "^15.0.0",
     "react-dom": "^15.0.0",
     "react-redux": "^4.4.5",
-    "redux": "^3.5.2"
+    "redux": "^3.5.2",
+    "redux-logger": "^2.6.1",
+    "redux-thunk": "^2.1.0"
   }
 }

src/components/Main.js

@@ -4,25 +4,10 @@ require('styles/App.css');
 import React, { Component } from 'react';
 
 class Main extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      status: false
-    }
-  }
-
-  componentDidMount() {
-    this.setState({
-      status: false
-    });
-  }
-
   render() {
-    let status = this.state;
-
     return (
       <div className="index">
-        component did mount? {status}
+        main content
       </div>
     );
   }

src/containers/App.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import Main from '../components/Main';
+import Main from '../components/main';
 
 class App extends Component {
   render() {
@@ -9,8 +9,10 @@ class App extends Component {
 }
 
 function mapStateToProps(state) {
-  const props = {};
-  return props;
+  let { auth } = state;
+  return {
+    auth: auth
+  };
 }
 
 export default connect(mapStateToProps)(App);

src/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
-import configureStore from './stores';
-import App from './containers/App';
+import configureStore from './stores/configureStore';
+import App from './containers/app';
 
 const store = configureStore();
 

src/reducers/user.js src/reducers/auth.jssrc/reducers/user.js renamed to src/reducers/auth.js

@@ -11,7 +11,7 @@ const initialState = {
   isAuthenticated: loggedIn(),
   userId: getUserId(),
   username: getUserName()
-}
+};
 
 function auth(state = initialState, action) {
   switch ( action.type ) {

src/reducers/index.js

@@ -1,4 +1,6 @@
 import { combineReducers } from 'redux';
+import Auth from './auth';
 
-const reducers = {};
-module.exports = combineReducers(reducers);
+export default combineReducers({
+  Auth
+});

src/stores/configureStore.js

@@ -0,0 +1,34 @@
+import { createStore, combineReducers, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import createLogger from 'redux-logger';
+
+// reducers combined
+import reducers from '../reducers/index';
+
+let logger, store;
+
+export default function configureStore(initialState) {
+  if ( process.env.NODE_ENV !== 'production' ) {
+    logger = createLogger();
+
+    store = createStore(reducers, initialState, applyMiddleware(
+      thunk,
+      logger
+    ));
+
+  } else {
+    store = createStore(reducers, initialState, applyMiddleware(
+      thunk
+    ));
+  }
+
+  if (module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept('../reducers', () => {
+      const nextReducer = require('../reducers');
+      store.replaceReducer(nextReducer)
+    })
+  }
+
+  return store
+}