Add utility types and refactor (#47)

* refactored to use utility-types library

* remove duplicated globals

* refactored redux modules

Author: piotrwitek

README.md

@@ -251,44 +251,43 @@ interface State {
   count: number;
 }
 
-export class StatefulCounterWithDefault extends React.Component<StatefulCounterWithDefaultProps, State> {
-  // to make defaultProps strictly typed we need to explicitly declare their type
-  // @see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11640
-  static defaultProps: DefaultProps = {
-    initialCount: 0,
-  };
-
-  props: StatefulCounterWithDefaultProps & DefaultProps;
+export const StatefulCounterWithDefault: React.ComponentClass<StatefulCounterWithDefaultProps> =
+  class extends React.Component<StatefulCounterWithDefaultProps & DefaultProps> {
+    // to make defaultProps strictly typed we need to explicitly declare their type
+    // @see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11640
+    static defaultProps: DefaultProps = {
+      initialCount: 0,
+    };
 
-  state: State = {
-    count: this.props.initialCount,
-  };
+    state: State = {
+      count: this.props.initialCount,
+    };
 
-  componentWillReceiveProps({ initialCount }: StatefulCounterWithDefaultProps) {
-    if (initialCount != null && initialCount !== this.props.initialCount) {
-      this.setState({ count: initialCount });
+    componentWillReceiveProps({ initialCount }: StatefulCounterWithDefaultProps) {
+      if (initialCount != null && initialCount !== this.props.initialCount) {
+        this.setState({ count: initialCount });
+      }
     }
-  }
 
-  handleIncrement = () => {
-    this.setState({ count: this.state.count + 1 });
-  }
+    handleIncrement = () => {
+      this.setState({ count: this.state.count + 1 });
+    }
 
-  render() {
-    const { handleIncrement } = this;
-    const { label } = this.props;
-    const { count } = this.state;
+    render() {
+      const { handleIncrement } = this;
+      const { label } = this.props;
+      const { count } = this.state;
 
-    return (
-      <div>
-        <span>{label}: {count} </span>
-        <button type="button" onClick={handleIncrement}>
-          {`Increment`}
-        </button>
-      </div>
-    );
-  }
-}
+      return (
+        <div>
+          <span>{label}: {count} </span>
+          <button type="button" onClick={handleIncrement}>
+            {`Increment`}
+          </button>
+        </div>
+      );
+    }
+  };
 
 ```
 
@@ -342,7 +341,7 @@ Adds state to a stateless counter
 
 ```tsx
 import * as React from 'react';
-import { Diff as Subtract } from 'react-redux-typescript';
+import { Subtract } from 'utility-types';
 
 // These props will be subtracted from original component type
 interface WrappedComponentProps {
@@ -414,7 +413,7 @@ Adds error handling using componentDidCatch to any component
 
 ```tsx
 import * as React from 'react';
-import { Diff as Subtract } from 'react-redux-typescript';
+import { Subtract } from 'utility-types';
 
 const MISSING_ERROR = 'Error was swallowed during propagation.';
 
@@ -521,15 +520,15 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
 import { connect } from 'react-redux';
 
 import { RootState } from '@src/redux';
-import { actions, CountersSelectors } from '@src/redux/counters';
+import { countersActions, CountersSelectors } from '@src/redux/counters';
 import { SFCCounter } from '@src/components';
 
 const mapStateToProps = (state: RootState) => ({
   count: CountersSelectors.getReduxCounter(state),
 });
 
 export const SFCCounterConnected = connect(mapStateToProps, {
-  onIncrement: actions.increment,
+  onIncrement: countersActions.increment,
 })(SFCCounter);
 
 ```
@@ -558,15 +557,15 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
 import { RootState, Dispatch } from '@src/redux';
-import { actions } from '@src/redux/counters';
+import { countersActions } from '@src/redux/counters';
 import { SFCCounter } from '@src/components';
 
 const mapStateToProps = (state: RootState) => ({
   count: state.counters.reduxCounter,
 });
 
 const mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators({
-  onIncrement: actions.increment,
+  onIncrement: countersActions.increment,
 }, dispatch);
 
 export const SFCCounterConnectedVerbose =
@@ -597,7 +596,7 @@ export default () => (
 import { connect } from 'react-redux';
 
 import { RootState } from '@src/redux';
-import { actions, CountersSelectors } from '@src/redux/counters';
+import { countersActions, CountersSelectors } from '@src/redux/counters';
 import { SFCCounter } from '@src/components';
 
 export interface SFCCounterConnectedExtended {
@@ -609,7 +608,7 @@ const mapStateToProps = (state: RootState, ownProps: SFCCounterConnectedExtended
 });
 
 export const SFCCounterConnectedExtended = connect(mapStateToProps, {
-  onIncrement: actions.increment,
+  onIncrement: countersActions.increment,
 })(SFCCounter);
 
 ```
@@ -647,7 +646,7 @@ All that without losing type-safety! Please check this very short [Tutorial](htt
 ```tsx
 import { createAction } from 'typesafe-actions';
 
-export const actions = {
+export const countersActions = {
   increment: createAction('INCREMENT'),
   add: createAction('ADD', (amount: number) => ({
     type: 'ADD',
@@ -660,10 +659,10 @@ export const actions = {
 
 ```tsx
 import store from '@src/store';
-import { actions } from '@src/redux/counters';
+import { countersActions } from '@src/redux/counters';
 
 // store.dispatch(actionCreators.increment(1)); // Error: Expected 0 arguments, but got 1.
-store.dispatch(actions.increment()); // OK => { type: "INCREMENT" }
+store.dispatch(countersActions.increment()); // OK => { type: "INCREMENT" }
 
 ```
 </p></details>
@@ -738,7 +737,7 @@ import { getType } from 'typesafe-actions';
 
 import { RootAction } from '@src/redux';
 
-import { actions } from './';
+import { countersActions } from './';
 
 export type State = {
   readonly reduxCounter: number;
@@ -747,11 +746,11 @@ export type State = {
 export const reducer = combineReducers<State, RootAction>({
   reduxCounter: (state = 0, action) => {
     switch (action.type) {
-      case getType(actions.increment):
-        return state + 1;
+      case getType(countersActions.increment):
+        return state + 1; // action is type: { type: "INCREMENT"; }
 
-      case getType(actions.add):
-        return state + action.payload;
+      case getType(countersActions.add):
+        return state + action.payload; // action is type: { type: "ADD"; payload: number; }
 
       default:
         return state;
@@ -804,21 +803,19 @@ Can be imported in various layers receiving or sending redux actions like: reduc
 ```tsx
 // RootActions
 import { RouterAction, LocationChangeAction } from 'react-router-redux';
-import { getReturnOfExpression } from 'react-redux-typescript';
+import { $call } from 'utility-types';
 
-import { actions as countersAC } from '@src/redux/counters';
-import { actions as todosAC } from '@src/redux/todos';
-import { actions as toastsAC } from '@src/redux/toasts';
+import { countersActions } from '@src/redux/counters';
+import { todosActions } from '@src/redux/todos';
+import { toastsActions } from '@src/redux/toasts';
 
-export const allActions = {
-  ...countersAC,
-  ...todosAC,
-  ...toastsAC,
-};
+const returnsOfActions = [
+  ...Object.values(countersActions),
+  ...Object.values(todosActions),
+  ...Object.values(toastsActions),
+].map($call);
 
-const returnOfActions =
-  Object.values(allActions).map(getReturnOfExpression);
-type AppAction = typeof returnOfActions[number];
+type AppAction = typeof returnsOfActions[number];
 type ReactRouterAction = RouterAction | LocationChangeAction;
 
 export type RootAction =
@@ -875,25 +872,28 @@ export default store;
 
 ### "redux-observable"
 
+Use `isActionOf` helper to filter actions and to narrow `RootAction` union type to a specific "action type" down the stream.
+
 ```tsx
 import { combineEpics, Epic } from 'redux-observable';
 import { isActionOf } from 'typesafe-actions';
 import { Observable } from 'rxjs/Observable';
 import { v4 } from 'uuid';
 
-import { RootAction, RootState, allActions } from '@src/redux';
-import { actions } from './';
+import { RootAction, RootState } from '@src/redux';
+import { todosActions } from '@src/redux/todos';
+import { toastsActions } from './';
 
 const TOAST_LIFETIME = 2000;
 
 const addTodoToast: Epic<RootAction, RootState> =
   (action$, store) => action$
-    .filter(isActionOf(allActions.addTodo))
-    .concatMap((action) => {
+    .filter(isActionOf(todosActions.addTodo))
+    .concatMap((action) => { // action is type: { type: "ADD_TODO"; payload: string; }
       const toast = { id: v4(), text: action.payload };
 
-      const addToast$ = Observable.of(actions.addToast(toast));
-      const removeToast$ = Observable.of(actions.removeToast(toast.id))
+      const addToast$ = Observable.of(toastsActions.addToast(toast));
+      const removeToast$ = Observable.of(toastsActions.removeToast(toast.id))
         .delay(TOAST_LIFETIME);
 
       return addToast$.concat(removeToast$);
@@ -965,7 +965,9 @@ export type Actions = {
     type: typeof ADD,
     payload: number, 
   }, 
-}; 
+};
+
+export type RootAction = Actions[keyof Actions];
 
 export const actions = { 
   increment: (): Actions[typeof INCREMENT] => ({ 
@@ -979,6 +981,7 @@ export const actions = {
 ```
 
 [⇧ back to top](#table-of-contents)
+
 ---
 
 # Tools
@@ -1307,7 +1310,6 @@ node ./generator/bin/generate-readme.js
 
 # Project Examples
 
-https://github.com/piotrwitek/react-redux-typescript-starter-kit  
 https://github.com/piotrwitek/react-redux-typescript-webpack-starter  
 
 [⇧ back to top](#table-of-contents)

docs/markdown/2_redux.md

@@ -112,6 +112,8 @@ When creating the store, use rootReducer. This will set-up a **strongly typed St
 
 ### "redux-observable"
 
+Use `isActionOf` helper to filter actions and to narrow `RootAction` union type to a specific "action type" down the stream.
+
 ::example='../../playground/src/redux/toasts/epics.ts'::
 
 [⇧ back to top](#table-of-contents)
@@ -176,7 +178,9 @@ export type Actions = {
     type: typeof ADD,
     payload: number, 
   }, 
-}; 
+};
+
+export type RootAction = Actions[keyof Actions];
 
 export const actions = { 
   increment: (): Actions[typeof INCREMENT] => ({ 
@@ -189,4 +193,4 @@ export const actions = {
 };
 ```
 
-[⇧ back to top](#table-of-contents)
+[⇧ back to top](#table-of-contents)

docs/markdown/6_end.md

@@ -27,7 +27,6 @@ node ./generator/bin/generate-readme.js
 
 # Project Examples
 
-https://github.com/piotrwitek/react-redux-typescript-starter-kit  
 https://github.com/piotrwitek/react-redux-typescript-webpack-starter  
 
 [⇧ back to top](#table-of-contents)

playground/package.json

@@ -25,15 +25,15 @@
     "react": "16.2.0",
     "react-dom": "16.2.0",
     "react-redux": "5.0.6",
-    "react-redux-typescript": "3.0.0-rc.3",
     "react-router-dom": "4.2.2",
     "react-router-redux": "5.0.0-alpha.8",
     "redux": "3.7.2",
     "redux-observable": "0.17.0",
     "reselect": "3.0.1",
     "rxjs": "5.5.6",
     "tslib": "1.8.1",
-    "typesafe-actions": "1.1.0",
+    "typesafe-actions": "1.1.2",
+    "utility-types": "1.0.0",
     "uuid": "3.1.0"
   },
   "devDependencies": {

playground/src/connected/sfc-counter-connected-extended.tsx

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 
 import { RootState } from '@src/redux';
-import { actions, CountersSelectors } from '@src/redux/counters';
+import { countersActions, CountersSelectors } from '@src/redux/counters';
 import { SFCCounter } from '@src/components';
 
 export interface SFCCounterConnectedExtended {
@@ -13,5 +13,5 @@ const mapStateToProps = (state: RootState, ownProps: SFCCounterConnectedExtended
 });
 
 export const SFCCounterConnectedExtended = connect(mapStateToProps, {
-  onIncrement: actions.increment,
+  onIncrement: countersActions.increment,
 })(SFCCounter);

playground/src/connected/sfc-counter-connected-verbose.tsx

@@ -2,15 +2,15 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
 import { RootState, Dispatch } from '@src/redux';
-import { actions } from '@src/redux/counters';
+import { countersActions } from '@src/redux/counters';
 import { SFCCounter } from '@src/components';
 
 const mapStateToProps = (state: RootState) => ({
   count: state.counters.reduxCounter,
 });
 
 const mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators({
-  onIncrement: actions.increment,
+  onIncrement: countersActions.increment,
 }, dispatch);
 
 export const SFCCounterConnectedVerbose =

playground/src/connected/sfc-counter-connected.tsx

@@ -1,13 +1,13 @@
 import { connect } from 'react-redux';
 
 import { RootState } from '@src/redux';
-import { actions, CountersSelectors } from '@src/redux/counters';
+import { countersActions, CountersSelectors } from '@src/redux/counters';
 import { SFCCounter } from '@src/components';
 
 const mapStateToProps = (state: RootState) => ({
   count: CountersSelectors.getReduxCounter(state),
 });
 
 export const SFCCounterConnected = connect(mapStateToProps, {
-  onIncrement: actions.increment,
+  onIncrement: countersActions.increment,
 })(SFCCounter);