maintenance/ts/complex - Typescript - Redux Observable (RxJS) example…

… working

src/state/ducks/foo/constants.ts

@@ -1 +1,2 @@
 export const ADD = "foo/ADD";
+export const ADDOTHER = "foo/ADDOTHER";

src/state/ducks/foo/epics.ts

@@ -1,14 +1,14 @@
 import { RootAction, RootState, Services } from "RootTypes";
 import { Epic } from "redux-observable";
-import { tap, ignoreElements, filter } from "rxjs/operators";
+import { tap, ignoreElements, filter, delay } from "rxjs/operators";
 import { isOfType } from "typesafe-actions";
 
 import * as constants from "./constants";
 
-// contrived example!!!
 export const logAddAction: Epic<RootAction, RootAction, RootState, Services> = (action$, state$, { logger }) =>
   action$.pipe(
     filter(isOfType(constants.ADD)), // action is narrowed to: { type: "ADD_TODO"; payload: string; }
+    delay(1000),
     tap(action => {
       logger.log(`action type must be equal: ${constants.ADD} === ${action.type}`);
     }),

src/views/containers/Frontpage/Frontpage.tsx

@@ -6,92 +6,44 @@ import { connect } from "react-redux";
 // Actions
 import * as fooActions from "state/ducks/foo/actions";
 
-// interface SProps {
-//   label: number;
-// }
-
-// interface DProps {
-//   onClick: (value: string) => void;
-// }
-
-// type IProps = SProps & DProps;
-
-const add = label => async (dispatch: Dispatch): Promise<void> => {
-  setTimeout(() => dispatch(fooActions.add(label)), 1000);
+const add = value => async (dispatch: Dispatch): Promise<void> => {
+  setTimeout(() => dispatch(fooActions.add(value)), 1000);
 };
 
 const mapStateToProps = (state: Types.RootState) => ({
-  label: state.foo.foo,
+  foos: state.foo.foo,
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<Types.RootAction>) => ({
-  updateString: (value: string) => dispatch(add(value)),
+const mapDispatchToProps = dispatch => ({
+  updateFoo: (value: string) => dispatch(fooActions.add(value)),
+  // updateFoo: (value: string) => dispatch(add(value)),
 });
 
 type Props = ReturnType<typeof mapStateToProps> &
 ReturnType<typeof mapDispatchToProps> & {
   label: string;
+  updateFoo: Function;
 };
 
-const Frontpage: React.FunctionComponent<Props> = ({ label }) => (
-  <div className="page page-frontpage">
-    <h1>Home {label}</h1>
-
-    <button type="button">1</button>
-    <button type="button">2</button>
-    <button type="button">3</button>
-  </div>
-);
+const Frontpage: React.FC<Props> = ({ foos, updateFoo }) => {
+  return (
+    <div className="page page-frontpage">
+      <h1>Home</h1>
+
+      <button type="button" onClick={() => updateFoo("1")}>
+        1
+      </button>
+      <button type="button" onClick={() => updateFoo("2")}>
+        2
+      </button>
+      <button type="button" onClick={() => updateFoo("3")}>
+        3
+      </button>
+    </div>
+  );
+};
 
 export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(Frontpage);
-
-// export default Frontpage;
-
-// import React from "react";
-// import { connect, DispatchProps } from "react-redux";
-// import { Dispatch } from "redux";
-
-// // Actions
-// import { fooOperations } from "state/ducks/foo";
-
-// interface SProps {
-//   clickedValue: number;
-// }
-
-// interface DProps {
-//   onClick: (value: string) => void;
-// }
-
-// type IProps = SProps & DProps;
-
-// const Frontpage: React.FunctionComponent<IProps> = ({ onClick, clickedValue = 1 }) => (
-//   <div className="page page-frontpage">
-//     <h1>Home {clickedValue}</h1>
-
-//     <button type="button" onClick={() => onClick("1")}>
-//       1
-//     </button>
-//     <button type="button" onClick={() => onClick("2")}>
-//       2
-//     </button>
-//     <button type="button" onClick={() => onClick("3")}>
-//       3
-//     </button>
-//   </div>
-// );
-
-// const mapStateToProps = (state: any): SProps => ({
-//   clickedValue: state.foo.foo.value,
-// });
-
-// const mapDispatchToProps = (dispatch: Dispatch<any>): DispatchProps => ({
-//   onClick: value => dispatch(fooOperations.fooAction(value)),
-// });
-
-// export default connect(
-//   mapStateToProps,
-//   mapDispatchToProps
-// )(Frontpage);

tsconfig.json

@@ -24,10 +24,12 @@
     ]
   },
   "include": [
-    "src"
+    "src",
+    "typings"
   ],
   "exclude": [
-    "./node_modules/**/*"
+    "./node_modules/**/*",
+    "src/**/*.spec.*"
   ],
   "extends": "./config/tsconfig.paths.json"
 }