Updated Guide and refactored playground project to work with the most recent TypeScript 3.7 and React & Redux type definitions. (#193)

* Updated deps

* Updated deps and refactored code to fix breaking changes

* Fixed issue with HOC Fixed #111

* Added an example of nested HOC with connect. Fixed #5

* Updated readme Intro & TOC

* Updated PR template

* Added new section with Nested HOC - wrapping a component, injecting props and connecting to redux #5

* Updated dev deps

Author: piotrwitek

.github/PULL_REQUEST_TEMPLATE.md

@@ -9,10 +9,9 @@
 
 ## Checklist
 
-* [ ] I have edited `README_SOURCE.md` (NOT `README.md`)
-* [ ] I have run `sh ./generate-readme.sh` script to generate an updated `README.md` (alternatively you can run `node ./generate-readme.js`)
-
 * [ ] I have read [CONTRIBUTING.md](https://github.com/piotrwitek/react-redux-typescript-guide/blob/master/CONTRIBUTING.md)
+* [ ] I have edited `README_SOURCE.md` (NOT `README.md`)
+* [ ] I have run CI script locally `npm run ci-check` to generate an updated `README.md`
 * [ ] I have linked all related issues above
 * [ ] I have rebased my branch
 

README.md

@@ -1,13 +1,12 @@
 {
   "devDependencies": {
-    "@types/node": "8.5.1",
-    "all-contributors-cli": "5.4.0",
+    "all-contributors-cli": "6.9.3",
     "doctoc": "1.4.0",
-    "husky": "1.3.1"
+    "husky": "3.0.9"
   },
   "scripts": {
-    "ci-check": "npm run readme:generate",
-    "doctoc": "doctoc --maxlevel=4 README_SOURCE.md",
+    "ci-check": "npm run doctoc && npm run readme:generate",
+    "doctoc": "doctoc --maxlevel=3 README_SOURCE.md",
     "readme:generate": "node generate-readme",
     "contributors:check": "all-contributors check",
     "contributors:add": "all-contributors add",

README_SOURCE.md

@@ -21,34 +21,35 @@
     "build-storybook": "build-storybook -s public"
   },
   "dependencies": {
-    "@types/jest": "24.0.11",
-    "@types/node": "11.13.8",
-    "@types/prop-types": "15.7.1",
-    "@types/react": "16.8.14",
-    "@types/react-dom": "16.8.4",
-    "@types/react-redux": "7.0.8",
-    "@types/react-router-dom": "4.3.2",
+    "@testing-library/react": "9.3.1",
+    "@types/jest": "24.0.21",
+    "@types/node": "12.12.5",
+    "@types/prop-types": "15.7.3",
+    "@types/react": "16.9.11",
+    "@types/react-dom": "16.9.3",
+    "@types/react-redux": "7.1.5",
+    "@types/react-router-dom": "5.1.2",
     "axios": "^0.19.0",
-    "connected-react-router": "6.5.0",
+    "connected-react-router": "6.5.2",
     "cuid": "2.1.6",
     "prop-types": "15.7.2",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-redux": "7.1.0",
-    "react-redux-typescript-scripts": "1.5.0",
-    "react-router-dom": "4.3.1",
-    "react-scripts": "3.0.1",
-    "react-testing-library": "7.0.0",
-    "redux": "4.0.1",
-    "redux-observable": "1.1.0",
+    "react": "16.11.0",
+    "react-dom": "16.11.0",
+    "react-redux": "7.1.1",
+    "react-redux-typescript-scripts": "1.6.2",
+    "react-router-dom": "5.1.2",
+    "react-scripts": "3.2.0",
+    "redux": "4.0.4",
+    "redux-observable": "1.2.0",
     "redux-thunk": "2.3.0",
     "reselect": "4.0.0",
-    "rxjs": "6.5.1",
-    "tslib": "1.9.3",
-    "tslint": "5.16.0",
-    "typesafe-actions": "4.2.0",
-    "typescript": "3.4.5",
-    "utility-types": "3.5.0"
+    "rxjs": "6.5.3",
+    "tslib": "1.10.0",
+    "tslint": "5.20.0",
+    "tslint-react": "4.1.0",
+    "typesafe-actions": "5.1.0",
+    "typescript": "3.7.1-rc",
+    "utility-types": "3.9.0"
   },
   "browserslist": [
     ">0.2%",
@@ -57,14 +58,14 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@storybook/addon-actions": "5.1.9",
-    "@storybook/addon-links": "5.1.9",
-    "@storybook/addon-storyshots": "5.1.9",
-    "@storybook/addons": "5.1.9",
-    "@storybook/react": "5.1.9",
-    "@types/storybook__addon-storyshots": "4.0.1",
+    "@storybook/addon-actions": "5.2.5",
+    "@storybook/addon-links": "5.2.5",
+    "@storybook/addon-storyshots": "5.2.5",
+    "@storybook/addons": "5.2.5",
+    "@storybook/react": "5.2.5",
+    "@types/storybook__addon-storyshots": "5.1.1",
     "@types/storybook__react": "4.0.2",
-    "react-test-renderer": "16.8.6",
-    "require-context.macro": "1.0.4"
+    "react-test-renderer": "16.11.0",
+    "require-context.macro": "1.2.2"
   }
 }

package-lock.json

@@ -21,12 +21,6 @@ export class ClassCounterWithDefaultProps extends React.Component<
     count: this.props.initialCount,
   };
 
-  componentWillReceiveProps({ initialCount }: Props) {
-    if (initialCount != null && initialCount !== this.props.initialCount) {
-      this.setState({ count: initialCount });
-    }
-  }
-
   handleIncrement = () => {
     this.setState({ count: this.state.count + 1 });
   };

package.json

@@ -1,7 +1,7 @@
 import React from 'react';
 import { createStore, combineReducers } from 'redux';
 import { Provider } from 'react-redux';
-import { render, fireEvent, cleanup } from 'react-testing-library';
+import { render, fireEvent, cleanup } from '@testing-library/react';
 
 import { FCCounterConnectedOwnProps as ConnectedCounter } from './fc-counter-connected-own-props';
 

playground/package-lock.json

@@ -2,23 +2,27 @@ import { action } from 'typesafe-actions';
 
 import { ADD, INCREMENT } from './constants';
 
-// CLASSIC API
+/* SIMPLE API */
+
 export const increment = () => action(INCREMENT);
 export const add = (amount: number) => action(ADD, amount);
 
-// ALTERNATIVE API - allow to use reference to "action-creator" function instead of "type constant"
-// e.g. case getType(increment): return { ... }
+/* ADVANCED API */
+
+// More flexible allowing to create complex actions more easily
+// use can use "action-creator" instance in place of "type constant"
+// e.g. case getType(increment): return action.payload;
 // This will allow to completely eliminate need for "constants" in your application, more info here:
 // https://github.com/piotrwitek/typesafe-actions#constants
 
-// OPTION 1 (with generics):
-// import { createStandardAction } from 'typesafe-actions';
-// export const increment = createStandardAction(INCREMENT)<void>();
-// export const add = createStandardAction(ADD)<number>();
-
-// OPTION 2 (with resolve callback):
-// import { createAction } from 'typesafe-actions';
-// export const increment = createAction(INCREMENT);
-// export const add = createAction(ADD, resolve => {
-//   return (amount: number) => resolve(amount);
-// });
+import { createAction } from 'typesafe-actions';
+import { Todo } from '../todos/models';
+
+export const emptyAction = createAction(INCREMENT)<void>();
+export const payloadAction = createAction(ADD)<number>();
+export const payloadMetaAction = createAction(ADD)<number, string>();
+
+export const payloadCreatorAction = createAction(
+  'TOGGLE_TODO',
+  (todo: Todo) => todo.id
+)<string>();