From 8b48b2e020ff1f82cdde1f390232afdc49f1c6e1 Mon Sep 17 00:00:00 2001 From: obsofficer-ctrl Date: Tue, 17 Mar 2026 14:29:31 +0400 Subject: [PATCH 01/10] Add playground\src\connected\connected-counter.tsx --- ...nd\\src\\connected\\connected-counter.tsx" | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 "playground\\src\\connected\\connected-counter.tsx" diff --git "a/playground\\src\\connected\\connected-counter.tsx" "b/playground\\src\\connected\\connected-counter.tsx" new file mode 100644 index 0000000..4de8c8e --- /dev/null +++ "b/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 { + render() { + const { label, count, onIncrement, onDecrement } = this.props; + return ( +
+ + {label}: {count} + + + +
+ ); + } +} + +export default ConnectedCounter; From fa87d2284555d0dce0ac9eb6637a464d08122d55 Mon Sep 17 00:00:00 2001 From: obsofficer-ctrl Date: Tue, 17 Mar 2026 14:29:32 +0400 Subject: [PATCH 02/10] Add playground\src\connected\connected-counter-with-decorator.tsx --- ...ted\\connected-counter-with-decorator.tsx" | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 "playground\\src\\connected\\connected-counter-with-decorator.tsx" diff --git "a/playground\\src\\connected\\connected-counter-with-decorator.tsx" "b/playground\\src\\connected\\connected-counter-with-decorator.tsx" new file mode 100644 index 0000000..bd2dae7 --- /dev/null +++ "b/playground\\src\\connected\\connected-counter-with-decorator.tsx" @@ -0,0 +1,57 @@ +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 from the parent component +interface OwnProps { + label: string; +} + +// Props from Redux state +interface StateProps { + count: number; +} + +// Props from Redux dispatch +interface DispatchProps { + onIncrement: () => void; + onDecrement: () => void; +} + +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 + ); + +@connect( + mapStateToProps, + mapDispatchToProps +) +class ConnectedCounterWithDecorator extends Component { + render() { + const { label, count, onIncrement, onDecrement } = this.props; + return ( +
+ + {label}: {count} + + + +
+ ); + } +} + +export default ConnectedCounterWithDecorator; From f3c7017a68f12b84e71f1076d879b00cce3f24b4 Mon Sep 17 00:00:00 2001 From: obsofficer-ctrl Date: Tue, 17 Mar 2026 14:29:34 +0400 Subject: [PATCH 03/10] Add playground\src\features\counters\index.ts --- "playground\\src\\features\\counters\\index.ts" | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 "playground\\src\\features\\counters\\index.ts" diff --git "a/playground\\src\\features\\counters\\index.ts" "b/playground\\src\\features\\counters\\index.ts" new file mode 100644 index 0000000..c888571 --- /dev/null +++ "b/playground\\src\\features\\counters\\index.ts" @@ -0,0 +1,3 @@ +export { countersReducer } from './reducer'; +export { countersActions } from './actions'; +export { CounterState } from './types'; From ee6535d7fb735a493779382fc9ce6f7ce2afa4b4 Mon Sep 17 00:00:00 2001 From: obsofficer-ctrl Date: Tue, 17 Mar 2026 14:29:36 +0400 Subject: [PATCH 04/10] Update playground\src\connected\connected-counter-with-decorator.tsx --- ...\\connected\\connected-counter-with-decorator.tsx" | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git "a/playground\\src\\connected\\connected-counter-with-decorator.tsx" "b/playground\\src\\connected\\connected-counter-with-decorator.tsx" index bd2dae7..20446a9 100644 --- "a/playground\\src\\connected\\connected-counter-with-decorator.tsx" +++ "b/playground\\src\\connected\\connected-counter-with-decorator.tsx" @@ -1,28 +1,30 @@ +// 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 from the parent component +// Props passed from the parent (own props) interface OwnProps { label: string; } -// Props from Redux state +// Props mapped from Redux state interface StateProps { count: number; } -// Props from Redux dispatch +// Props mapped from Redux dispatch interface DispatchProps { onIncrement: () => void; onDecrement: () => void; } +// Combined props type for the component type Props = OwnProps & StateProps & DispatchProps; -const mapStateToProps = (state: RootState, ownProps: OwnProps): StateProps => ({ +const mapStateToProps = (state: RootState, _ownProps: OwnProps): StateProps => ({ count: state.counters.reduxCounter, }); @@ -42,6 +44,7 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => class ConnectedCounterWithDecorator extends Component { render() { const { label, count, onIncrement, onDecrement } = this.props; + return (
From fbfc3b6a538c1379584221850d846441493fb148 Mon Sep 17 00:00:00 2001 From: obsofficer-ctrl Date: Tue, 17 Mar 2026 14:29:37 +0400 Subject: [PATCH 05/10] Update playground\src\connected\connected-counter-with-decorator.tsx --- ...ected\\connected-counter-with-decorator.tsx" | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git "a/playground\\src\\connected\\connected-counter-with-decorator.tsx" "b/playground\\src\\connected\\connected-counter-with-decorator.tsx" index 20446a9..2cf6f9c 100644 --- "a/playground\\src\\connected\\connected-counter-with-decorator.tsx" +++ "b/playground\\src\\connected\\connected-counter-with-decorator.tsx" @@ -1,30 +1,33 @@ -// NOTE: Requires "experimentalDecorators": true in tsconfig.json +// 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 from the parent (own props) +// Props passed by the parent component interface OwnProps { label: string; } -// Props mapped from Redux state +// Props mapped from Redux state via mapStateToProps interface StateProps { count: number; } -// Props mapped from Redux dispatch +// Props mapped from Redux dispatch via mapDispatchToProps interface DispatchProps { onIncrement: () => void; onDecrement: () => void; } -// Combined props type for the component +// All props combined — used as the component's Props type type Props = OwnProps & StateProps & DispatchProps; -const mapStateToProps = (state: RootState, _ownProps: OwnProps): StateProps => ({ +const mapStateToProps = ( + state: RootState, + _ownProps: OwnProps +): StateProps => ({ count: state.counters.reduxCounter, }); @@ -37,6 +40,8 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => dispatch ); +// Using @connect decorator — equivalent to: +// export default connect(mapStateToProps, mapDispatchToProps)(ConnectedCounterWithDecorator) @connect( mapStateToProps, mapDispatchToProps From 268213a556525cf60a92a6d08ad5307fe56bb487 Mon Sep 17 00:00:00 2001 From: obsofficer-ctrl Date: Tue, 17 Mar 2026 14:29:39 +0400 Subject: [PATCH 06/10] Add playground\tsconfig.json --- "playground\\tsconfig.json" | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 "playground\\tsconfig.json" diff --git "a/playground\\tsconfig.json" "b/playground\\tsconfig.json" new file mode 100644 index 0000000..797e833 --- /dev/null +++ "b/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" + ] +} From ebc7315e3d037c639a0d0d88885f3d4a6a8011ff Mon Sep 17 00:00:00 2001 From: obsofficer-ctrl Date: Tue, 17 Mar 2026 14:29:41 +0400 Subject: [PATCH 07/10] Update playground\src\connected\connected-counter-with-decorator.tsx From dc2edcb4f492d75905271f913dc53cb07a70a278 Mon Sep 17 00:00:00 2001 From: obsofficer-ctrl Date: Tue, 17 Mar 2026 14:29:43 +0400 Subject: [PATCH 08/10] Update playground\src\connected\connected-counter-with-decorator.tsx --- ...nd\\src\\connected\\connected-counter-with-decorator.tsx" | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git "a/playground\\src\\connected\\connected-counter-with-decorator.tsx" "b/playground\\src\\connected\\connected-counter-with-decorator.tsx" index 2cf6f9c..3e59c4b 100644 --- "a/playground\\src\\connected\\connected-counter-with-decorator.tsx" +++ "b/playground\\src\\connected\\connected-counter-with-decorator.tsx" @@ -21,7 +21,7 @@ interface DispatchProps { onDecrement: () => void; } -// All props combined — used as the component's Props type +// All props combined — used as the component Props type type Props = OwnProps & StateProps & DispatchProps; const mapStateToProps = ( @@ -40,7 +40,8 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => dispatch ); -// Using @connect decorator — equivalent to: +// Using @connect decorator +// Equivalent to: // export default connect(mapStateToProps, mapDispatchToProps)(ConnectedCounterWithDecorator) @connect( mapStateToProps, From 48d552ddab82e08d74f70a09eeb7e5debb4f4cf8 Mon Sep 17 00:00:00 2001 From: obsofficer-ctrl Date: Tue, 17 Mar 2026 14:29:44 +0400 Subject: [PATCH 09/10] Update playground\src\connected\connected-counter-with-decorator.tsx From 578f47f0d9a57531be0069b9e883588913d8b748 Mon Sep 17 00:00:00 2001 From: obsofficer-ctrl Date: Tue, 17 Mar 2026 14:29:46 +0400 Subject: [PATCH 10/10] Update playground\src\connected\connected-counter-with-decorator.tsx