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`