Making a container

Author: zaki-yama

typescript-react-starter/src/components/Hello.tsx

@@ -3,9 +3,11 @@ import * as React from 'react';
 export interface Props {
   name: string;
   enthusiasmLevel?: number;
+  onIncrement?: () => void;
+  onDecrement?: () => void;
 }
 
-function Hello({ name, enthusiasmLevel = 1}: Props) {
+function Hello({ name, enthusiasmLevel = 1, onIncrement, onDecrement }: Props) {
   if (enthusiasmLevel <= 0) {
     throw new Error('You could be a little more enthusiastic. :D');
   }
@@ -15,6 +17,10 @@ function Hello({ name, enthusiasmLevel = 1}: Props) {
       <div className="greeting">
         Hello {name + getExclamationMarks(enthusiasmLevel)}
       </div>
+      <div>
+        <button onClick={onDecrement}>-</button>
+        <button onClick={onIncrement}>+</button>
+      </div>
     </div>
   );
 }

typescript-react-starter/src/containers/Hello.tsx

@@ -0,0 +1,22 @@
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import Hello from '../components/Hello'
+import * as actions from '../actions'
+import { StoreState } from '../types';
+
+export function mapStateToProps({ enthusiamLevel, languageName }: StoreState) {
+  return {
+    enthusiamLevel,
+    name: languageName,
+  };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<actions.EnthusiasmAction>) {
+  return {
+    onIncrement: () => dispatch(actions.incrementEnthusiasm()),
+    onDecrement: () => dispatch(actions.decrementEnthusiasm()),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Hello);