system.import

Author: likun7981

build/webpack-config/alias.js

@@ -1,6 +1,5 @@
 module.exports = paths => ({
-  REDUCER_TOOL: paths.src('store/reducerTool'),
-  FETCH: paths.src('fetch'),
+  UTILS: paths.src('utils'),
   COMPONENTS: paths.src('components'),
   CONTAINERS: paths.src('containers'),
   STYLES: paths.src('static/styles'),

package.json

@@ -72,6 +72,7 @@
     "react-router": "^3.0.0",
     "redux": "^3.6.0",
     "redux-logger": "^2.7.4",
-    "redux-thunk": "^2.1.0"
+    "redux-thunk": "^2.1.0",
+    "whatwg-fetch": "^2.0.1"
   }
 }

src/components/Header/Header.js

@@ -9,8 +9,8 @@ export const Header = () => (
       Home
     </IndexLink>
     {' · '}
-    <Link to="/counter" activeClassName="route--active">
-      Counter
+    <Link to="/increase" activeClassName="route--active">
+      Increase
     </Link>
   </div>
 );

src/reducers/location.js

@@ -1,5 +1,3 @@
-import { createReducer } from 'REDUCER_TOOL';
-
 // ------------------------------------
 // Constants
 // ------------------------------------
@@ -18,11 +16,9 @@ export function locationChange(location = '/') {
 // ------------------------------------
 // Specialized Action Creator
 // ------------------------------------
-export const updateLocation = ({ dispatch }) => nextLocation => dispatch(locationChange(nextLocation));
+export const updateLocation = ({ dispatch }) =>
+  nextLocation =>
+  dispatch(locationChange(nextLocation));
 
-// ------------------------------------
-// Reducer
-// ------------------------------------
-export default createReducer({
-  [LOCATION_CHANGE]: (state, action) => action.payload
-}, null);
+export default (state = null, action) =>
+(action.type === LOCATION_CHANGE ? action.payload : state);

src/routes/Counter/containers/CounterContainer.js

@@ -1,5 +1,5 @@
-import HomeViewComponent from './components/HomeView';
+import HomeComponent from './components/HomeView';
 
 export default {
-  component: HomeViewComponent
+  component: HomeComponent
 };

src/routes/Counter/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 
-export const Counter = props => (
+export const Increase = props => (
   <div style={{ margin: '0 auto' }} >
-    <h2>Counter: {props.counter}</h2>
+    <h2>Counter: {props.increase}</h2>
     <button className="btn btn-default" onClick={props.increment}>
       Increment
     </button>
@@ -13,10 +13,10 @@ export const Counter = props => (
   </div>
 );
 
-Counter.propTypes = {
-  counter: React.PropTypes.number.isRequired,
+Increase.propTypes = {
+  increase: React.PropTypes.number.isRequired,
   doubleAsync: React.PropTypes.func.isRequired,
   increment: React.PropTypes.func.isRequired
 };
 
-export default Counter;
+export default Increase;

src/routes/Home/index.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import { actions } from '../reducers/increase';
+
+import IncreaseComponents from '../components/increaseComponent';
+
+const mapDispatchToProps = actions;
+
+const mapStateToProps = state => ({
+  increase: state.increase
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(IncreaseComponents);

src/routes/Counter/components/CounterComponent.js renamed to src/routes/increase/components/increaseComponent.js

@@ -0,0 +1,19 @@
+// import { injectReducer } from 'REDUCER_TOOL';
+
+// export default store => ({
+//   path: 'counter',
+//   getComponent(nextState, cb) {
+//     require.ensure([], (require) => {
+//       const Counter = require('./containers/CounterContainer').default;
+//       const reducer = require('./reducers/Counter').default;
+//       injectReducer(store, { key: 'counter', reducer });
+//       cb(null, Counter);
+//     }, 'counter');
+//   }
+// });
+import container from './containers/increaseContainer';
+import reducer from './reducers/increase';
+import component from './components/increaseComponent';
+
+export default component;
+export { reducer, container, component };

src/routes/increase/containers/increaseContainer.js

@@ -1,4 +1,4 @@
-import { createReducer } from 'REDUCER_TOOL';
+import { createReducer } from 'UTILS/reducerTool';
 
 const COUNTER_INCREMENT = 'COUNTER_INCREMENT';
 /**
@@ -16,7 +16,7 @@ const incrementBase = (value = 1) => ({
  */
 const doubleAsync = () => (dispatch, getState) => {
   setTimeout(() => {
-    dispatch(incrementBase(getState().counter));
+    dispatch(incrementBase(getState().increase));
   }, 1200);
 };
 const increment = () => incrementBase(1);

src/routes/increase/index.js

@@ -1,14 +1,30 @@
 import CoreLayout from 'LAYOUTS/CoreLayout/CoreLayout';
-import Home from './Home';
-import CounterRoute from './Counter';
+import { injectReducerFactory } from 'UTILS/reducerTool';
+import Home from './home';
 
+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);
+    // });
+    require.ensure([], (require) => {
+      const routeModule = require('./increase');
+      const { container, reducer } = routeModule;
+      injectReducer('increase', reducer);
+      cb(null, container);
+    }, 'increase');
+  }
+});
+// const paths = ['increase'];
 export const createRoutes = store => ({
   path: '/',
   component: CoreLayout,
   indexRoute: Home,
-  childRoutes: [
-    CounterRoute(store)
-  ]
+  childRoutes: [createChildRoute('increase', store)]
 });
 
 export default createRoutes;

src/routes/Counter/reducers/Counter.js renamed to src/routes/increase/reducers/increase.js

@@ -1,11 +1,10 @@
 import { applyMiddleware, compose, createStore } from 'redux';
 import thunk from 'redux-thunk';
 import createLogger from 'redux-logger';
+import makeRootReducer from 'UTILS/reducerTool';
 import { browserHistory } from 'react-router';
 import { updateLocation } from 'REDUCERS/location';
 
-import makeRootReducer from './reducerTool';
-
 const logger = createLogger();
 export default (initialState = {}) => {
   const middleware = [thunk, logger];
@@ -27,12 +26,14 @@ export default (initialState = {}) => {
   );
   store.asyncReducers = {};
   // store.unsubscribeHistory = browserHistory.listen(updateLocation(store));
-  // if (module.hot) {
-  //   module.hot.accept('./reducerTool', () => {
-  //     const reducers = require('./reducerTool').default;
-  //     store.replaceReducer(reducers(store.asyncReducers));
-  //   });
-  // }
+  if (module.hot) {
+    module.hot.accept('../utils/reducerTool', () => {
+      System.import('../utils/reducerTool').then((module) => {
+        const makeReducer = module.default;
+        store.replaceReducer(makeReducer(store.asyncReducers));
+      });
+    });
+  }
 
   return store;
 };

src/routes/index.js

@@ -6,8 +6,8 @@ const makeRootReducer = asyncReducers => combineReducers({
   ...asyncReducers
 });
 
-export const injectReducer = (store, { key, reducer }) => {
-  if (Object.hasOwnProperty.call(store.asyncReducers, key)) return;
+export const injectReducerFactory = store => (key, reducer) => {
+  if (Reflect.has(store.asyncReducers, key)) return;
   store.asyncReducers[key] = reducer;
   store.replaceReducer(makeRootReducer(store.asyncReducers));
 };

src/store/createStore.js

@@ -0,0 +1,61 @@
+import 'whatwg-fetch';
+
+const globalCallbacks = {};
+let globalConifg = {};
+export const config = (configs) => {
+  const callbacksKeys = ['onStart', 'onComplete', 'onSuccess', 'onError'];
+  callbacksKeys.forEach((key) => {
+    globalCallbacks[key] = typeof configs[key] === 'function' ? configs[key] : () => {};
+    delete configs[key];
+  });
+  globalConifg = configs;
+};
+
+export default (url, options) => {
+  const { onStart, onComplete, onSuccess, onError } = globalCallbacks;
+  const promise = new Promise((resolve, reject) => {
+    onStart();
+    fetch(url, Object.assign({}, globalConifg, options))
+      .then((response) => {
+        if (response.ok) {
+          response.json().then((result) => {
+            onSuccess(result);
+            onComplete(null, result);
+            resolve(result);
+          });
+        } else {
+          const error = new Error(response.statusText);
+          error.response = response;
+          onError(error);
+          onComplete(error);
+          reject(error);
+        }
+      }, (error) => {
+        onError(error);
+        onComplete(error);
+        reject(error);
+      });
+  });
+  promise.success = (fn) => {
+    promise.then((result) => {
+      if (typeof fn === 'function') fn(result);
+    });
+    return promise;
+  };
+  promise.error = (fn) => {
+    promise.then(null, (error) => {
+      if (typeof fn === 'function') fn(error);
+    });
+    return promise;
+  };
+  promise.complete = (fn) => {
+    fn = (typeof fn === 'function') ? fn : () => {};
+    promise.then((result) => {
+      fn(null, result);
+    }, (error) => {
+      fn(error);
+    });
+    return promise;
+  };
+  return promise;
+};