Fix: @connect decorator

playground\src\connected\connected-counter-with-decorator.tsx

@@ -0,0 +1,66 @@
+// NOTE: Requires `"experimentalDecorators": true` in tsconfig.json
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators, Dispatch } from 'redux';
+import { RootState } from '../store/types';
+import { countersActions } from '../features/counters';
+
+// Props passed by the parent component
+interface OwnProps {
+  label: string;
+}
+
+// Props mapped from Redux state via mapStateToProps
+interface StateProps {
+  count: number;
+}
+
+// Props mapped from Redux dispatch via mapDispatchToProps
+interface DispatchProps {
+  onIncrement: () => void;
+  onDecrement: () => void;
+}
+
+// All props combined — used as the component Props type
+type Props = OwnProps & StateProps & DispatchProps;
+
+const mapStateToProps = (
+  state: RootState,
+  _ownProps: OwnProps
+): StateProps => ({
+  count: state.counters.reduxCounter,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps =>
+  bindActionCreators(
+    {
+      onIncrement: countersActions.increment,
+      onDecrement: countersActions.decrement,
+    },
+    dispatch
+  );
+
+// Using @connect decorator
+// Equivalent to:
+// export default connect(mapStateToProps, mapDispatchToProps)(ConnectedCounterWithDecorator)
+@connect<StateProps, DispatchProps, OwnProps, RootState>(
+  mapStateToProps,
+  mapDispatchToProps
+)
+class ConnectedCounterWithDecorator extends Component<Props> {
+  render() {
+    const { label, count, onIncrement, onDecrement } = this.props;
+
+    return (
+      <div>
+        <span>
+          {label}: {count}
+        </span>
+        <button onClick={onIncrement}>+</button>
+        <button onClick={onDecrement}>-</button>
+      </div>
+    );
+  }
+}
+
+export default ConnectedCounterWithDecorator;

playground\src\connected\connected-counter.tsx

@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators, Dispatch } from 'redux';
+import { RootState } from '../store/types';
+import { countersActions } from '../features/counters';
+import { hotelsActions } from '../features/hotels';
+
+// Props that come from the parent component
+interface OwnProps {
+  label: string;
+}
+
+// Props from Redux state (mapStateToProps)
+interface StateProps {
+  count: number;
+}
+
+// Props from Redux dispatch (mapDispatchToProps)
+interface DispatchProps {
+  onIncrement: () => void;
+  onDecrement: () => void;
+}
+
+// All component props combined
+type Props = OwnProps & StateProps & DispatchProps;
+
+// Map Redux state to component props
+const mapStateToProps = (state: RootState, ownProps: OwnProps): StateProps => ({
+  count: state.counters.reduxCounter,
+});
+
+// Map Redux dispatch to component props
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps =>
+  bindActionCreators(
+    {
+      onIncrement: countersActions.increment,
+      onDecrement: countersActions.decrement,
+    },
+    dispatch
+  );
+
+// Using the @connect decorator syntax
+@connect(mapStateToProps, mapDispatchToProps)
+class ConnectedCounter extends Component<Props> {
+  render() {
+    const { label, count, onIncrement, onDecrement } = this.props;
+    return (
+      <div>
+        <span>
+          {label}: {count}
+        </span>
+        <button onClick={onIncrement}>+</button>
+        <button onClick={onDecrement}>-</button>
+      </div>
+    );
+  }
+}
+
+export default ConnectedCounter;

playground\src\features\counters\index.ts

@@ -0,0 +1,3 @@
+export { countersReducer } from './reducer';
+export { countersActions } from './actions';
+export { CounterState } from './types';

playground\tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "experimentalDecorators": true,
+    "baseUrl": "."
+  },
+  "include": [
+    "src"
+  ]
+}