(React-Redux-Observable-TypeScript): TypeScript configuration complete

Author: schowdhury

app/config/IState.ts

@@ -0,0 +1,5 @@
+import IAuthInfo from "../features/auth/IAuthInfo";
+
+export default interface IState {
+    authInfo: IAuthInfo
+}

app/config/rootEpic.js app/config/rootEpic.tsapp/config/rootEpic.js renamed to app/config/rootEpic.ts

@@ -1,7 +1,7 @@
 import { combineEpics } from 'redux-observable';
-import { epicChecklogin } from '../features/signup/epicSignup';
+import { epicCheckLogin } from '../features/auth/epicAuth';
 
 // List all the epics here
 export default combineEpics(
-    epicChecklogin,
+    epicCheckLogin,
 );

app/config/rootReducer.js

@@ -0,0 +1,7 @@
+import {combineReducers} from "redux";
+import reducerAuth from "../features/auth/reducerAuth";
+import IState from "./IState";
+
+export default combineReducers <IState>({
+    authInfo: reducerAuth
+})

app/config/rootReducer.ts

@@ -1,17 +1,18 @@
-import {createStore, applyMiddleware, compose} from "redux";
+import {createStore, applyMiddleware, compose, Action} from "redux";
 import { createEpicMiddleware } from 'redux-observable';
 
+import IState from "../config/IState";
 import rootReducer from "./rootReducer";
 import rootEpic from "./rootEpic";
 
-const epicMiddleware = createEpicMiddleware();
+const epicMiddleware = createEpicMiddleware<Action<any>, Action<any>, IState>();
 
 const middlewares = [
     epicMiddleware
 ];
 const initialState = {};
 
-const composeEnhancers = (window).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 const enhancers = composeEnhancers(applyMiddleware(...middlewares));
 
 export const Store = createStore(rootReducer, initialState, enhancers);

app/config/store.js app/config/store.tsapp/config/store.js renamed to app/config/store.ts

@@ -0,0 +1,3 @@
+export default interface IAuthInfo{
+    status: boolean
+}

app/features/auth/IAuthInfo.ts

@@ -0,0 +1,20 @@
+import {Action} from "redux";
+
+export const enum TypeActionAuth {
+    checkLogin = "AuthInfo > checkLogin",
+    setLogin = "AuthInfo > setLogin",
+};
+
+export interface IActionAuth extends Action {
+    status?: boolean;
+    type: TypeActionAuth;
+}
+
+export const actionCheckIsLoggedIn = (): IActionAuth => ({
+    type: TypeActionAuth.checkLogin,
+});
+
+export const actionSetIsLoggedIn = (status: boolean): IActionAuth => ({
+    type: TypeActionAuth.setLogin,
+    status
+});

app/features/auth/actionAuth.ts

@@ -0,0 +1,21 @@
+import {Epic, ofType} from "redux-observable";
+import {Action} from "redux";
+import {actionSetIsLoggedIn, TypeActionAuth} from "./actionAuth";
+import IState from "../../config/IState";
+
+import {switchMap} from 'rxjs/operators';
+import {from} from "rxjs";
+
+export const epicCheckLogin: Epic<Action, Action, IState> = ( action$, state$ ) => 
+    action$.pipe(
+        ofType(TypeActionAuth.checkLogin),
+        switchMap(
+            () => {
+                const actions: Action[] = [
+                    actionSetIsLoggedIn(true),
+                ];
+
+                return from(actions);
+            }
+        )
+    );

app/features/auth/epicAuth.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import {connect} from "react-redux";
+import {Action, Dispatch} from  "redux";
+import {actionCheckIsLoggedIn} from "./actionAuth";
+
+import IState from "../../config/IState";
+
+interface ISignupState {
+    status: boolean
+}
+
+interface ISignupDispatch {
+    onLoadCheckLogin: () => Action<any>
+}
+
+interface ISignupProps extends ISignupState, ISignupDispatch {};
+
+class _Auth extends React.PureComponent<ISignupProps> {
+    public render (){
+        const props = this.props;
+        return (
+            <div>
+                <h4>Status: {props.status.toString()}</h4>
+                <button onClick={props.onLoadCheckLogin}>Login please</button>
+            </div>
+        );
+    }
+}
+
+const mapState = (state: IState) => ({
+    status: state.authInfo.status
+})
+
+const mapDispatch = (dispatch: Dispatch) => ({
+    onLoadCheckLogin: () => dispatch(actionCheckIsLoggedIn())
+})
+
+export default connect(mapState, mapDispatch)(_Auth);

app/features/auth/index.tsx

@@ -0,0 +1,21 @@
+import {TypeActionAuth, IActionAuth} from "./actionAuth";
+import IAuthInfo from "./IAuthInfo";
+
+const initialState: IAuthInfo = {
+    status: false,
+}
+
+export default (state:IAuthInfo = initialState, action: IActionAuth) => {
+    switch(action.type) {
+        case TypeActionAuth.setLogin:
+            return Object.assign(
+                {},
+                state,
+                {status: action.status}
+            )
+        
+        default: 
+            return state;
+                
+    }
+}