Everyone likes to flow these days

.flowconfig

@@ -0,0 +1,5 @@
+[libs]
+./flow-typed
+
+[options]
+module.name_mapper='^\(actions\|components\|constants\|containers\|reducers\|store\|test\)\/\(.*\)$' -> '<PROJECT_ROOT>/src/\1/\2'

.gitignore

@@ -6,3 +6,6 @@ dist
 
 # Ignore logs
 npm-debug.log
+
+# Ignore flow
+flow-typed

package.json

@@ -9,8 +9,9 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "postinstall": "npm run build",
+    "postinstall": "flow-typed update && npm run build",
     "eslint": "eslint .",
+    "flow": "flow",
     "build": "cross-env NODE_ENV=production webpack --config ./webpack.production.js --progress --profile --colors",
     "surge": "rm -rf dist && npm run build && cp dist/index.html dist/200.html && surge dist"
   },
@@ -69,6 +70,7 @@
     "express": "^4.16.1",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.3",
+    "flow-bin": "^0.57.3",
     "history": "^4.7.2",
     "html-loader": "^0.5.1",
     "html-webpack-plugin": "^2.30.1",

src/actions/app.js

@@ -1,6 +1,12 @@
+// @flow
+
 import { APP_LOAD } from 'constants/action-types';
 
-export function loadApp() {
+export type LoadApp = {
+  type: 'APP_LOAD'
+}
+
+export function loadApp(): LoadApp {
   return {
     type: APP_LOAD,
   };

src/actions/index.js

@@ -0,0 +1,9 @@
+// @flow
+
+import type {
+  LoadApp
+} from './app';
+
+export type ActionType = LoadApp;
+
+export type Dispatch = (action: ActionType) => void;

src/constants/action-types.js

@@ -1,3 +1,5 @@
-export const APP_LOAD = 'APP_LOAD';
+// @flow
+
+export const APP_LOAD: 'APP_LOAD' = 'APP_LOAD';
 
 export default { APP_LOAD };

src/containers/app.js

@@ -1,22 +1,32 @@
+// @flow
+
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { loadApp } from 'actions/app';
+import type { MapStateToProps } from 'react-redux';
+import type { Dispatch } from 'actions/index';
+import type { State } from 'reducers/index';
 import styles from './app.css';
 
-type Props = {
-  dispatch: () => void,
+type StateProps = {
   loaded: boolean
 }
 
-export class AppContainer extends Component {
+type Props = StateProps & {
+  dispatch: Dispatch
+}
+
+export class AppContainer extends Component<Props> {
   componentDidMount() {
-    this.props.dispatch(loadApp());
-  }
+    const { dispatch } = this.props;
 
-  props: Props;
+    dispatch(loadApp());
+  }
 
   render() {
-    if (!this.props.loaded) {
+    const { loaded } = this.props;
+
+    if (!loaded) {
       return null;
     }
 
@@ -26,10 +36,8 @@ export class AppContainer extends Component {
   }
 }
 
-function mapStateToProperties(state) {
-  return {
-    loaded: state.app.loaded
-  };
-}
+const mapStateToProps: MapStateToProps<State, {}, StateProps> = (state) => ({
+  loaded: state.app.loaded
+});
 
-export default connect(mapStateToProperties)(AppContainer);
+export default connect(mapStateToProps)(AppContainer);

src/containers/layout.js

@@ -1,3 +1,5 @@
+// @flow
+
 import React from 'react';
 
 type Props = {

src/index.js

@@ -1,10 +1,15 @@
+// @flow
 import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
-import store from 'store';
-import routes from 'routes';
+import store from 'store/index';
+import routes from './routes';
 
-render(
-  <Provider store={store}>{routes}</Provider>,
-  document.getElementById('react')
-);
+const root = document.getElementById('react');
+
+if (root) {
+  render(
+    <Provider store={store}>{routes}</Provider>,
+    root
+  );
+}

src/reducers/app.js

@@ -1,13 +1,21 @@
+// @flow
+
+import type { ActionType } from 'actions/index';
 import { APP_LOAD } from 'constants/action-types';
 
-const initialState = {
-  loaded: false,
+export type AppState = {
+  +loaded: boolean
+}
+
+const initialState: AppState = {
+  loaded: false
 };
 
-export default function app(state = initialState, action) {
+export default function app(state: AppState = initialState, action: ActionType) {
   switch (action.type) {
-    case APP_LOAD:
+    case APP_LOAD: {
       return { ...state, loaded: true };
+    }
     default:
       return state;
   }

src/reducers/index.js

@@ -1,3 +1,18 @@
+// @flow
+
+import type { Dispatch } from 'actions/index';
+import type { AppState } from './app';
+
 export { default as app } from './app';
 
+export type State = {
+  +app: AppState
+};
+
+export type Store = {
+  dispatch: Dispatch,
+  getState: () => State,
+  subscribe: (listener: () => void) => () => void
+};
+
 export default {};

src/routes.js

@@ -1,3 +1,5 @@
+// @flow
+
 import React from 'react';
 import { Switch, Route } from 'react-router';
 import { ConnectedRouter } from 'connected-react-router';

src/store/index.js

@@ -1,10 +1,12 @@
+// @flow
+
 // Create final store using all reducers and applying middleware
 import { createBrowserHistory } from 'history';
 // Redux utility functions
 import { compose, createStore, combineReducers, applyMiddleware } from 'redux';
 import { routerMiddleware, connectRouter } from 'connected-react-router';
 // Import all reducers
-import * as reducers from 'reducers';
+import * as reducers from 'reducers/index';
 
 // Configure reducer to store state at state.router
 // You can store it elsewhere by specifying a custom `routerStateSelector`