reduxjs · leoasis · Sep 26, 2015 · Sep 30, 2015 · Sep 30, 2015 · Oct 2, 2015
diff --git a/examples/flow-counter/.babelrc b/examples/flow-counter/.babelrc
@@ -0,0 +1,17 @@
+{
+  "stage": 2,
+  "env": {
+    "development": {
+      "plugins": [
+        "react-transform"
+      ],
+      "extra": {
+        "react-transform": [{
+          "target":  "react-transform-hmr",
+          "imports": ["react"],
+          "locals":  ["module"]
+        }]
+      }
+    }
+  }
+}
diff --git a/examples/flow-counter/.flowconfig b/examples/flow-counter/.flowconfig
@@ -0,0 +1,11 @@
+[ignore]
+.*/node_modules/
+
+[include]
+
+[libs]
+interfaces/
+
+
+[options]
+module.system=node
diff --git a/examples/flow-counter/actions/counter.js b/examples/flow-counter/actions/counter.js
@@ -0,0 +1,40 @@
+/* @flow */
+
+import type { Action, AppState } from '../types';
+
+type Thunk<S, D> = reduxThunk$Thunk<S, D>;
+
+export const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
+export const DECREMENT_COUNTER = 'DECREMENT_COUNTER';
+
+export function increment() : Action {
+  return {
+    type: INCREMENT_COUNTER
+  };
+}
+
+export function decrement() : Action {
+  return {
+    type: DECREMENT_COUNTER
+  };
+}
+
+export function incrementIfOdd() : Thunk<AppState, Action> {
+  return (dispatch, getState) => {
+    let { counter } = getState();
+
+    if (counter % 2 === 0) {
+      return;
+    }
+
+    dispatch(increment());
+  };
+}
+
+export function incrementAsync(delay: number = 1000) : Thunk<AppState, Action> {
+  return dispatch => {
+    setTimeout(() => {
+      dispatch(increment());
+    }, delay);
+  };
+}
diff --git a/examples/flow-counter/components/Counter.js b/examples/flow-counter/components/Counter.js
@@ -0,0 +1,32 @@
+/* @flow */
+
+import React, { Component } from 'react';
+
+export type CounterProps = {
+  counter: number,
+  increment: () => any,
+  decrement: () => any,
+  incrementIfOdd: () => any,
+  incrementAsync: () => any,
+};
+
+class Counter extends Component<{}, CounterProps, {}> {
+  render() : ReactElement<any, any, any> {
+    let { increment, incrementIfOdd, incrementAsync, decrement, counter } = this.props;
+    return (
+      <p>
+        Clicked: {counter} times
+        {' '}
+        <button onClick={increment}>+</button>
+        {' '}
+        <button onClick={decrement}>-</button>
+        {' '}
+        <button onClick={incrementIfOdd}>Increment if odd</button>
+        {' '}
+        <button onClick={() => incrementAsync()}>Increment async</button>
+      </p>
+    );
+  }
+}
+
+export default Counter;
diff --git a/examples/flow-counter/containers/App.js b/examples/flow-counter/containers/App.js
@@ -0,0 +1,33 @@
+/* @flow */
+
+import { connect } from 'react-redux';
+import Counter from '../components/Counter';
+import { increment, decrement, incrementIfOdd, incrementAsync } from '../actions/counter';
+import type { AppState, Dispatchable } from '../types';
+import type { Dispatch } from 'redux';
+
+type StateProps = AppState;
+
+function mapStateToProps(state : AppState) : StateProps {
+  return {
+    counter: state.counter
+  };
+}
+
+type DispatchProps = {
+  increment: () => any,
+  decrement: () => any,
+  incrementIfOdd: () => any,
+  incrementAsync: () => any
+}
+
+function mapDispatchToProps(dispatch: Dispatch<Dispatchable>) : DispatchProps {
+  return {
+    increment: () => dispatch(increment()),
+    decrement: () => dispatch(decrement()),
+    incrementIfOdd: () => dispatch(incrementIfOdd()),
+    incrementAsync: () => dispatch(incrementAsync()),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Counter);
diff --git a/examples/flow-counter/index.html b/examples/flow-counter/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Redux counter example</title>
+  </head>
+  <body>
+    <div id="root">
+    </div>
+    <script src="/static/bundle.js"></script>
+  </body>
+</html>
diff --git a/examples/flow-counter/index.js b/examples/flow-counter/index.js
@@ -0,0 +1,15 @@
+/* @flow */
+
+import React from 'react';
+import { Provider } from 'react-redux';
+import App from './containers/App';
+import configureStore from './store/configureStore';
+
+const store = configureStore();
+
+React.render(
+  // Flow limitation: Does not detect children type if we don't explicitly
+  // set the `children` prop
+  <Provider store={store} children={() => <App />} />,
+  document.getElementById('root')
+);
diff --git a/examples/flow-counter/interfaces/react-redux.js b/examples/flow-counter/interfaces/react-redux.js
@@ -0,0 +1,16 @@
+declare module 'react-redux' {
+  declare type MapStateToProps<State, Props> = (state: State) => Props;
+  declare type MapDispatchToProps<Dispatchable, Props> = (dispatch: redux$Dispatch<Dispatchable>) => Props;
+
+  declare function connect<State, Dispatchable, StateProps, ComponentProps, DispatchProps: $Diff<ComponentProps, StateProps>, ComponentDefaultProps, ComponentState>(
+    mapStateToProps: MapStateToProps<State, StateProps>,
+    mapDispatchToProps: MapDispatchToProps<Dispatchable, DispatchProps>
+  ) : (component: ReactClass<ComponentDefaultProps, ComponentProps, ComponentState>) => ReactClass<ComponentDefaultProps, ComponentProps, ComponentState>;
+
+  declare type ProviderProps<S, D> = {
+    store: redux$Store<S, D>,
+    children?: () => ReactElement<any, any, any>
+  };
+
+  declare class Provider<S, D> extends ReactComponent<{}, ProviderProps<S, D>, {}> {}
+}
diff --git a/examples/flow-counter/interfaces/redux-thunk.js b/examples/flow-counter/interfaces/redux-thunk.js
@@ -0,0 +1,23 @@
+// For now declaring these types globally with a namespace, so I can
+// export the default function in the module
+declare type reduxThunk$Thunk<State, Dispatchable> = (dispatch: redux$Dispatch<Dispatchable>, getState: () => State) => ?Dispatchable;
+declare type reduxThunk$ThunkMiddlewareDispatchable<State, Dispatchable> = reduxThunk$Thunk<State, Dispatchable> | Dispatchable;
+
+declare module 'redux-thunk' {
+  declare var exports: {
+    <State, Dispatchable>(
+      api: redux$MiddlewareAPI<State, reduxThunk$ThunkMiddlewareDispatchable<State, Dispatchable>>
+    ) : (next: redux$Dispatch<Dispatchable>) => redux$Dispatch<reduxThunk$ThunkMiddlewareDispatchable<State, Dispatchable>>
+  };
+}
+
+// function thunk<State, Dispatchable: Object>(_ref: MiddlewareAPI<State, ThunkMiddlewareDispatchable<State, Dispatchable>>) : (next: Dispatch<Dispatchable>) => Dispatch<ThunkMiddlewareDispatchable<State, Dispatchable>> {
+//   var dispatch = _ref.dispatch;
+//   var getState = _ref.getState;
+//
+//   return function (next) {
+//     return function (action: ThunkMiddlewareDispatchable<State, Dispatchable>) : ?ThunkMiddlewareDispatchable<State, Dispatchable> {
+//       return typeof action === 'function' ? action(dispatch, getState) : next(action);
+//     };
+//   };
+// }
diff --git a/examples/flow-counter/interfaces/redux.js b/examples/flow-counter/interfaces/redux.js
@@ -0,0 +1,39 @@
+declare type redux$Dispatch<Dispatchable> = (action: Dispatchable) => ?Dispatchable;
+
+declare type redux$Store<State, Dispatchable> = {
+  dispatch: redux$Dispatch<Dispatchable>,
+  subscribe: (listener: () => void) => (() => void),
+  getState: () => State,
+  replaceReducer: any
+};
+
+declare type redux$MiddlewareAPI<State, Dispatchable> = {
+  dispatch: redux$Dispatch<Dispatchable>,
+  getState: () => State,
+};
+
+declare type redux$Middleware<State, Dispatchable, DispatchableNext> = (
+  api: redux$MiddlewareAPI<State, Dispatchable>
+) => (
+  next: redux$Dispatch<DispatchableNext>
+) => redux$Dispatch<Dispatchable>;
+
+declare module "redux" {
+  declare type ReduxInitAction = { type: '@@redux/INIT' };
+  declare type ReduxAction<Action> = ReduxInitAction | Action;
+
+  declare type Reducer<State, Action> = (state?: State, action: ReduxAction<Action>) => State;
+  declare type Dispatch<Dispatchable> = redux$Dispatch<Dispatchable>;
+
+  declare type Store<State, Dispatchable> = redux$Store<State, Dispatchable>;
+
+  declare type CreateStore<State, Action, Dispatchable> = (reducer: Reducer<State, Action>, initialState?: State) => Store<State, Dispatchable>
+  declare function createStore<State, Action>(reducer: Reducer<State, Action>, initialState?: State) : Store<State, ReduxAction<Action>>;
+
+  declare type MiddlewareAPI<State, Dispatchable> = redux$MiddlewareAPI<State, Dispatchable>;
+
+  declare type Middleware<State, Dispatchable, DispatchableNext> = redux$Middleware<State, Dispatchable, DispatchableNext>;
+
+  declare function applyMiddleware<State, Action, Dispatchable, DispatchableNext>(middleware: Middleware<State, Dispatchable, DispatchableNext>)
+    : (next: CreateStore<State, Action, DispatchableNext>) => CreateStore<State, Action, Dispatchable>;
+}
diff --git a/examples/flow-counter/package.json b/examples/flow-counter/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "redux-flow-counter-example",
+  "version": "0.0.0",
+  "description": "Redux Flow counter example",
+  "scripts": {
+    "start": "node server.js",
+    "test": "NODE_ENV=test mocha --recursive --compilers js:babel-core/register",
+    "test:watch": "npm test -- --watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rackt/redux.git"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/rackt/redux/issues"
+  },
+  "homepage": "http://rackt.github.io/redux",
+  "dependencies": {
+    "react": "^0.13.3",
+    "react-redux": "^2.1.2",
+    "redux": "file:../../",
+    "redux-thunk": "^0.1.0"
+  },
+  "devDependencies": {
+    "babel-core": "^5.6.18",
+    "babel-loader": "^5.1.4",
+    "babel-plugin-react-transform": "^1.0.3",
+    "expect": "^1.6.0",
+    "express": "^4.13.3",
+    "jsdom": "^5.6.1",
+    "mocha": "^2.2.5",
+    "mocha-jsdom": "^1.0.0",
+    "node-libs-browser": "^0.5.2",
+    "react-transform-hmr": "^1.0.0",
+    "webpack": "^1.9.11",
+    "webpack-dev-middleware": "^1.2.0",
+    "webpack-hot-middleware": "^2.2.0"
+  }
+}
diff --git a/examples/flow-counter/reducers/counter.js b/examples/flow-counter/reducers/counter.js
@@ -0,0 +1,14 @@
+/* @flow */
+
+import type { CounterState, Action } from '../types';
+
+export default function counter(state?: CounterState = 0, action: Action) : CounterState {
+  switch (action.type) {
+  case 'INCREMENT_COUNTER':
+    return state + 1;
+  case 'DECREMENT_COUNTER':
+    return state - 1;
+  default:
+    return state;
+  }
+}
diff --git a/examples/flow-counter/reducers/index.js b/examples/flow-counter/reducers/index.js
@@ -0,0 +1,10 @@
+/* @flow */
+
+import counter from './counter';
+import type { AppState, Action } from '../types';
+
+export default function rootReducer(state?: AppState, action : Action) : AppState {
+  return {
+    counter: counter(state && state.counter, action)
+  };
+}
diff --git a/examples/flow-counter/server.js b/examples/flow-counter/server.js
@@ -0,0 +1,23 @@
+var webpack = require('webpack');
+var webpackDevMiddleware = require('webpack-dev-middleware');
+var webpackHotMiddleware = require('webpack-hot-middleware');
+var config = require('./webpack.config');
+
+var app = new require('express')();
+var port = 3000;
+
+var compiler = webpack(config);
+app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
+app.use(webpackHotMiddleware(compiler));
+
+app.get("/", function(req, res) {
+  res.sendFile(__dirname + '/index.html');
+});
+
+app.listen(port, function(error) {
+  if (error) {
+    console.error(error);
+  } else {
+    console.info("==> 🌎  Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port);
+  }
+});
diff --git a/examples/flow-counter/store/configureStore.js b/examples/flow-counter/store/configureStore.js
@@ -0,0 +1,27 @@
+/* @flow */
+
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+// import type { ThunkMiddlewareDispatchable } from 'redux-thunk';
+import reducer from '../reducers';
+import type { AppState, Action } from '../types';
+
+type ThunkMiddlewareDispatchable<S, D> = reduxThunk$ThunkMiddlewareDispatchable<S, D>;
+
+const createStoreWithMiddleware = applyMiddleware(
+  thunk
+)(createStore);
+
+export default function configureStore(initialState?: AppState) {
+  const store = createStoreWithMiddleware(reducer, initialState);
+
+  if (module.hot) {
+    // Enable Webpack hot module replacement for reducers
+    module.hot.accept('../reducers', () => {
+      const nextReducer = require('../reducers');
+      store.replaceReducer(nextReducer);
+    });
+  }
+
+  return store;
+}