ad create injectable store

Author: likun7981

build/base-config/environment.js

@@ -1,4 +1,3 @@
-const argv = require('yargs').argv;
 
 const NODE_ENV = process.env.NODE_ENV || 'development';
 
@@ -7,5 +6,4 @@ module.exports = {
   __DEV__: NODE_ENV === 'development',
   __PROD__: NODE_ENV === 'production',
   __TEST__: NODE_ENV === 'test',
-  __COVERAGE__: !argv.watch && NODE_ENV === 'test'
 };

build/base-config/path.js

@@ -11,5 +11,6 @@ module.exports = {
   root: base,
   src: base.bind(null, 'src'),
   dist: base.bind(null, 'dist'),
-  server: base.bind(null, 'server')
+  server: base.bind(null, 'server'),
+  public: base.bind(null, 'src', 'static')
 };

build/server.js

@@ -24,7 +24,6 @@ if (env.__DEV__) {
     publicPath: webpackConfig.output.publicPath,
     contentBase: paths.src(),
     lazy: false,
-    // historyApiFallback: true,
     stats: {
       chunkModules: false,
       colors: true,
@@ -33,22 +32,11 @@ if (env.__DEV__) {
   }))
   app.use(require('webpack-hot-middleware')(compiler))
 
-  // Serve static assets from ~/src/static since Webpack is unaware of
-  // these files. This middleware doesn't need to be enabled outside
-  // of development since this directory will be copied into ~/dist
-  // when the application is compiled.
-  app.use(express.static(paths.src('static')))
+  app.use(express.static(paths.public()))
 } else {
   debug(
-    'Server is being run outside of live development mode, meaning it will ' +
-    'only serve the compiled application bundle in ~/dist. Generally you ' +
-    'do not need an application server for this and can instead use a web ' +
-    'server such as nginx to serve your static files. See the "deployment" ' +
-    'section in the README for more information on deployment strategies.'
+    'Server is being run outside of live development mode ! ' +
   )
-  // Serving ~/dist by default. Ideally these files should be served by
-  // the web server and not the app server, but this helps to demo the
-  // server in production.
   app.use(express.static(paths.dist()))
 }
 

build/webpack-config/base.js

@@ -18,7 +18,7 @@ module.exports = (paths) => {
     return debug(
       `Package "${dep}" was not found as an npm dependency in package.json; ` +
       `it won't be included in the webpack vendor bundle.
-       Consider removing it from \`Vendors\` in this file`
+       Consider removing it from "Vendors" in this file`
     );
   });
   if (__DEV__) {
@@ -33,6 +33,10 @@ module.exports = (paths) => {
       filename: '[name].[hash:8].js',
       path: paths.dist(),
       publicPath: '/'
+    },
+    performance: {
+      hints: false,
+      maxAssetSize: 2000000,
     }
   };
 };

build/webpack-config/index.js

@@ -14,14 +14,13 @@ module.exports = {
   },
   output: base.output,
   resolve: {
-    extensions: ['.js', '.jsx', '.json'],
     alias
   },
   devtool: base.devtool,
   module: {
     loaders
   },
-  performance: { hints: false },
+  performance: base.performance,
   devServer: base.devServer,
   plugins
 };

package.json

@@ -5,6 +5,7 @@
   "main": "src/main.js",
   "scripts": {
     "start": "better-npm-run start",
+    "compile": "better-npm-run compile",
     "lintJs": "eslint --fix ./src"
   },
   "keywords": [
@@ -18,6 +19,9 @@
       "env": {
         "DEBUG": "app:*"
       }
+    },
+    "compile": {
+      "command": "webpack"
     }
   },
   "author": "likun",
@@ -56,12 +60,12 @@
     "line-debugger": "^0.0.1",
     "mocha": "^3.2.0",
     "redbox-react": "^1.3.3",
+    "redux-logger": "^2.7.4",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
-    "webpack": "2.2.0-rc.1",
+    "webpack": "2.2.0-rc.3",
     "webpack-dev-middleware": "^1.8.4",
-    "webpack-hot-middleware": "^2.13.2",
-    "yargs": "^6.5.0"
+    "webpack-hot-middleware": "^2.13.2"
   },
   "dependencies": {
     "normalize.css": "^5.0.0",
@@ -70,7 +74,6 @@
     "react-redux": "^5.0.0",
     "react-router": "^3.0.0",
     "redux": "^3.6.0",
-    "redux-logger": "^2.7.4",
     "redux-thunk": "^2.1.0",
     "whatwg-fetch": "^2.0.1"
   }

src/main.js

@@ -3,17 +3,12 @@ import ReactDOM from 'react-dom';
 import createStore from './store/createStore';
 import App from './containers/AppContainer';
 
-// ========================================================
-// Store Instantiation
-// ========================================================
+// store initial
 const initialState = window.INITIAL_STATE;
 const store = createStore(initialState);
 
-// ========================================================
-// Render Setup
-// ========================================================
+// some setup
 const MOUNT_NODE = document.getElementById('root');
-console.log(ReactDOM);
 let render = () => {
   const routes = require('./routes/index').default(store); // !important
   ReactDOM.render(
@@ -39,7 +34,6 @@ if (__DEV__ && module.hot) {
     render();
   });
 }
-// ========================================================
-// Go!
-// ========================================================
+
+// start render
 render();

src/routes/Home/components/HomeView.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import DuckImage from '../assets/magic.png';
 import './HomeView.less';
 
 export const HomeView = () => (
@@ -8,7 +7,7 @@ export const HomeView = () => (
     <img
       alt="This is a duck, because Redux!"
       className="duck"
-      src={DuckImage}
+      src="/images/magic.png"
     />
   </div>
 );

src/routes/increase/components/increaseComponent.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 
 export const Increase = props => (
   <div style={{ margin: '0 auto' }} >
@@ -14,9 +14,9 @@ export const Increase = props => (
 );
 
 Increase.propTypes = {
-  increase: React.PropTypes.number.isRequired,
-  doubleAsync: React.PropTypes.func.isRequired,
-  increment: React.PropTypes.func.isRequired
+  increase: PropTypes.number.isRequired,
+  doubleAsync: PropTypes.func.isRequired,
+  increment: PropTypes.func.isRequired
 };
 
 export default Increase;

src/routes/increase/containers/increaseContainer.js

@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
-import { actions } from '../reducers/Increase';
+import { actionCreatorMaps } from '../reducers/increase';
 
 import IncreaseComponents from '../components/IncreaseComponent';
 
-const mapDispatchToProps = actions;
+const mapDispatchToProps = actionCreatorMaps;
 
 const mapStateToProps = state => ({
   increase: state.increase

src/routes/increase/index.js

@@ -1,6 +1,12 @@
-import container from './containers/IncreaseContainer';
-import reducer from './reducers/Increase';
-import component from './components/IncreaseComponent';
-
-export default component;
-export { reducer, container, component };
+export default store => ({
+  path: 'increase',
+  getComponent(nextState, cb) {
+    Promise.all([
+      System.import('./containers/IncreaseContainer'),
+      System.import('./reducers')
+    ]).then(([container, reducers]) => {
+      store.injectAll(reducers.default);
+      cb(null, container.default);
+    });
+  }
+});

src/routes/increase/reducers/increase.js

@@ -1,4 +1,4 @@
-import { createReducer } from 'UTILS/reducerTool';
+import createReducers from 'UTILS/creators';
 
 const COUNTER_INCREMENT = 'COUNTER_INCREMENT';
 /**
@@ -21,11 +21,11 @@ const doubleAsync = () => (dispatch, getState) => {
 };
 const increment = () => incrementBase(1);
 
-export const actions = {
+export const actionCreatorMaps = {
   increment,
   doubleAsync
 };
 
-export default createReducer({
+export default createReducers({
   [COUNTER_INCREMENT]: (state, action) => state + action.payload
 }, 0);

src/routes/increase/reducers/index.js

@@ -0,0 +1,5 @@
+import increase from './increase';
+
+export default {
+  increase
+};

src/routes/index.js

@@ -1,24 +1,14 @@
-import CoreLayout from 'LAYOUTS/CoreLayout/CoreLayout';
-import { injectReducerFactory } from 'UTILS/reducerTool';
+import CoreLayout from 'LAYOUTS/CoreLayout';
 import Home from './home';
+import Increase from './increase';
 
-const createChildRoute = (path, store) => ({
-  path,
-  getComponent(nextState, cb) {
-    const injectReducer = injectReducerFactory(store);
-    System.import(`./${path}/index`).then((routeModule) => {
-      const { container, reducer } = routeModule;
-      injectReducer(`${path}`, reducer);
-      cb(null, container);
-    });
-  }
-});
-const paths = ['increase'];
 export const createRoutes = store => ({
   path: '/',
   component: CoreLayout,
   indexRoute: Home,
-  childRoutes: paths.map(path => createChildRoute(path, store))
+  childRoutes: [
+    Increase(store)
+  ]
 });
 
 export default createRoutes;

src/routes/Home/assets/magic.png renamed to src/static/images/magic.png

@@ -0,0 +1,56 @@
+/**
+ * author: lelandrichardson
+ * https://github.com/lelandrichardson/redux-injectable-store
+ */
+import { createStore, combineReducers } from 'redux';
+
+const FAKE_INITIAL_REDUCER_NAMESPACE = '___';
+const IDENTITY_REDUCER = (state = null) => state;
+
+const makeEmptyReducerMap = () => ({
+  // putting this here because `combineReducers` will complain if there isn't at least
+  // one reducer initially.
+  [FAKE_INITIAL_REDUCER_NAMESPACE]: IDENTITY_REDUCER
+});
+
+const createInjectableStore = (preloadedState, enhancer, defaultReducers) => {
+  let reducers = defaultReducers || makeEmptyReducerMap();
+  const store = createStore(combineReducers(reducers), preloadedState, enhancer);
+
+  const replace = () => {
+    store.replaceReducer(combineReducers(reducers));
+  };
+
+  const clearReducers = () => {
+    reducers = defaultReducers || makeEmptyReducerMap();
+  };
+
+  const inject = (namespace, reducer) => {
+    if (reducers[namespace] == null) {
+      reducers[namespace] = reducer;
+      replace();
+    }
+  };
+
+  const injectAll = (reducerMap) => {
+    let hasChanged = false;
+    Object.keys(reducerMap).forEach((namespace) => {
+      if (reducers[namespace] == null) {
+        reducers[namespace] = reducerMap[namespace];
+        hasChanged = true;
+      }
+    });
+    if (hasChanged) {
+      replace();
+    }
+  };
+
+  return {
+    ...store,
+    inject,
+    injectAll,
+    clearReducers
+  };
+};
+
+export default createInjectableStore;