some change

Author: likun7981

.flowconfig

@@ -11,4 +11,6 @@ module.name_mapper='\$components' -> '<PROJECT_ROOT>/src/components'
 module.name_mapper='\$styles' -> '<PROJECT_ROOT>/src/styles'
 module.name_mapper='\$containers' -> '<PROJECT_ROOT>/src/containers'
 module.name_mapper='\$reducers' -> '<PROJECT_ROOT>/src/reducers'
-module.name_mapper='\$layouts' -> '<PROJECT_ROOT>/src/layouts'
+module.name_mapper='\$layouts' -> '<PROJECT_ROOT>/src/layouts'
+module.file_ext=.css
+module.file_ext=.less

README.md

@@ -1,6 +1,6 @@
 #react-redux-boilerplate
 
-  react+redux+react-router3(async) and so on...
+  react+redux+react-router4.x+flow
 
   about test, I will write. please wait a moment! 
 
@@ -12,9 +12,7 @@ $ yarn install(or npm install)
 $ npm start
 ```
 ## Related issue
- 1. [react-hot-loader do not support with async router](https://github.com/gaearon/react-hot-boilerplate/pull/61#issuecomment-218835358)
- 2. [router3 will console a warning with react-hot-loader](https://github.com/gaearon/react-hot-loader/issues/249)
-
+  
 ## License
 
 MIT

bin/www.js

@@ -1,4 +1,4 @@
-// @flow
+// 
 const debug = require('debug')('app:bin:www');
 const ip = require('internal-ip');
 const detect = require('detect-port');

build/webpack-config/loaders.js

@@ -5,58 +5,85 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const isDev = env.__DEV__;
 const isProd = env.__PRO__;
 module.exports = () => {
-  const rules = [{
-    test: /\.(js|jsx)$/,
-    exclude: /node_modules/,
-    use: [{ loader: 'babel-loader' }]
-  }, {
-    test: /\.json$/,
-    use: [{ loader: 'json-loader' }]
-  }, {
-    test: /\.css$/,
-    use: [{
-      loader: 'style-loader'
-    }, {
-      loader: 'css-loader',
-      options: {
-        minimize: isProd
-      }
-    }, {
-      loader: 'postcss-loader'
-    }]
-  }, {
-    test: /\.less$/,
-    use: [{
-      loader: 'style-loader'
-    }, {
-      loader: 'css-loader',
-      options: {
-        minimize: isProd
-      }
-    }, {
-      loader: 'postcss-loader'
-    }, {
-      loader: 'less-loader',
-      options: {
-        sourceMap: !isProd
-      }
-    }]
-  }, {
-    test: /\.(png|jpg)$/,
-    use: [{
-      loader: 'url-loader',
-      options: {
-        limit: 8192
-      }
-    }]
-  }];
+  const rules = [
+    {
+      test: /\.(js|jsx)$/,
+      exclude: /node_modules/,
+      use: [{ loader: 'babel-loader' }],
+    },
+    {
+      test: /\.json$/,
+      use: [{ loader: 'json-loader' }],
+    },
+    {
+      test: /\.css$/,
+      use: [
+        {
+          loader: 'style-loader',
+        },
+        {
+          loader: 'css-loader',
+          options: {
+            minimize: isProd,
+            module: true,
+          },
+        },
+        {
+          loader: 'postcss-loader',
+        },
+      ],
+    },
+    {
+      test: /\.less$/,
+      use: [
+        {
+          loader: 'style-loader',
+        },
+        {
+          loader: 'css-loader',
+          options: {
+            minimize: isProd,
+            module: true,
+          },
+        },
+        {
+          loader: 'postcss-loader',
+        },
+        {
+          loader: 'less-loader',
+          options: {
+            sourceMap: !isProd,
+          },
+        },
+      ],
+    },
+    {
+      test: /\.(png|jpg)$/,
+      use: [
+        {
+          loader: 'url-loader',
+          options: {
+            limit: 8192,
+          },
+        },
+      ],
+    },
+  ];
   if (!isDev) {
     debug('Apply ExtractTextPlugin to CSS loaders.');
-    rules.filter(rule => rule.use && rule.use.find(loaderObj => /css/.test(loaderObj.loader.split('?')[0])))
-      .forEach((rule) => {
+    rules
+      .filter(
+        rule =>
+          rule.use &&
+          rule.use.find(loaderObj => /css/.test(loaderObj.loader.split('?')[0]))
+      )
+      .forEach(rule => {
         const first = rule.use[0];
         const rest = rule.use.slice(1);
-        rule.loader = ExtractTextPlugin.extract({ fallback: first, loader: rest });
+        rule.loader = ExtractTextPlugin.extract({
+          fallback: first,
+          loader: rest,
+        });
         delete rule.use;
       });
   }

flow-typed/self-define/injectAbleStore.js renamed to flow-typed/sefl-define.js

@@ -1,4 +1,5 @@
 // @flow
+declare var __DEV__: boolean;
 declare module '$self-define' {
   declare type StoreWithInjectAble = {
     inject: (namespace: any, reducer: any) => void,
@@ -13,7 +14,7 @@ declare module '$self-define' {
   };
   declare type RouteProps = {
     path: string,
-    component: (props?: Object) => React$Element<any>,
+    component: ?React$Component<any, any, any> | ((props?: Object) => React$Element<any>),
     routes?: Array<Object>,
     exact?: boolean
   };

flow-typed/self-define/react.js

@@ -7,7 +7,7 @@
     "start": "better-npm-run start",
     "compile": "better-npm-run compile",
     "lint": "eslint src",
-    "flow": "flow",
+    "flowCheck": "flow",
     "lint:fix": "npm run lint -- --fix",
     "start:dist": "better-npm-run start:dist"
   },
@@ -97,7 +97,7 @@
     "whatwg-fetch": "^2.0.3"
   },
   "pre-commit": [
-    "flow",
+    "flowCheck",
     "lint"
   ]
 }

package.json

@@ -1,21 +1,17 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
-import './Header.less';
+import { NavLink  } from 'react-router-dom';
+import HeaderModule from './Header.less';
 
 export const Header = () => (
   <div>
     <h1>Magic-FE React Redux Boilerplate</h1>
-    <Link to="/">
+    <NavLink exact  to="/" activeClassName={HeaderModule['route--active']}>
       Home
-    </Link>
+    </NavLink >
     {' · '}
-    <Link to="/increase">
+    <NavLink  to="/increase" activeClassName={HeaderModule['route--active']}>
       Increase
-    </Link>
-    {' · '}
-    <Link to="/increase2">
-      Increase2
-    </Link>
+    </NavLink >
   </div>
 );
 

src/Test.js

@@ -1,4 +1,4 @@
-// @flow
+// 
 import React from 'react';
 import { Route } from 'react-router-dom';
 import type { RouteProps } from '$self-define';

src/app.js

@@ -1,10 +1,11 @@
+// @flow
 import React from 'react';
 import { HashRouter as Router } from 'react-router-dom';
 import { Provider } from 'react-redux';
-
+import type { StoreWithInjectAble } from '$self-define';
 type props = {
-  routes: {},
-  store: {}
+  routes: React$Element<any>,
+  store: StoreWithInjectAble
 };
 
 class App extends React.Component<void, props, void> {

src/components/Header/Header.js

@@ -1,20 +1,26 @@
-import React, { PropTypes } from 'react';
-import Header from 'COMPONENTS/Header';
-import 'STYLES/core.less';
-import './CoreLayout.less';
+import React from 'react';
+import Header from '$components/Header';
+import RouteWithSubRoutes from '$components/RouteWithSubRoutes';
+import '$styles/core.less';
+import CoreLayoutModule from './CoreLayout.less';
 import Counter from '../Counter';
+import type { StoreWithInjectAble, RouteProps } from '$self-define';
+type props = {
+  routes: (store: StoreWithInjectAble) => Array<RouteProps>,
+  store: StoreWithInjectAble
+};
 
-const CoreLayout = (props) => {
-  const { children } = props;
+const CoreLayout = (props: props) => {
   return (
     <div className="container text-center">
       <Counter />
       <Header />
-      <div className="core-layout__viewport">{children}</div>
+      <div className={CoreLayoutModule['core-layout__viewport']}>
+        {props
+          .routes(props.store)
+          .map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}
+      </div>
     </div>
   );
 };
-CoreLayout.propTypes = {
-  children: PropTypes.element.isRequired,
-};
 export default CoreLayout;

src/components/RouteWithSubRoutes/index.js

@@ -1,12 +1,12 @@
+// @flow
 import React from 'react';
-import './HomeView.less';
-
+import HomeViewLess from './HomeView.less';
 export const HomeView = () => (
   <div>
     <h4>Welcome!</h4>
     <img
       alt="A magic!"
-      className="magic"
+      className={HomeViewLess.magic}
       src="/images/magic.png"
     />
   </div>

src/components/RouteWithSubRoutes/props.js

@@ -1 +1,2 @@
+// @flow
 export default () => import('./components/HomeView');

src/containers/AppContainer.js

@@ -1,11 +1,14 @@
 import { connect } from 'react-redux';
-import { actionCreatorMaps } from './reducers/increase';
+import { actionCreatorMaps as mapDispatchToProps } from './reducers/increase';
+import reducers from './reducers';
+import type { StoreWithInjectAble } from '$self-define';
 
 import Increase from './components/Increase';
 
-const mapDispatchToProps = actionCreatorMaps;
-
 const mapStateToProps = state => ({
   result: state.result,
 });
-export default connect(mapStateToProps, mapDispatchToProps)(Increase);
+export default (store: StoreWithInjectAble) => {
+  store.injectAll(reducers);
+  return connect(mapStateToProps, mapDispatchToProps)(Increase);
+};