(React-Redux-Observable): Rxjs configuration complete

Author: schowdhury

app/config/rootEpic.js

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

app/config/store.js

@@ -1,10 +1,19 @@
 import {createStore, applyMiddleware, compose} from "redux";
-import rootReducer from './rootReducer';
+import { createEpicMiddleware } from 'redux-observable';
 
-const middlewares = [];
+import rootReducer from "./rootReducer";
+import rootEpic from "./rootEpic";
+
+const epicMiddleware = createEpicMiddleware();
+
+const middlewares = [
+    epicMiddleware
+];
 const initialState = {};
 
 const composeEnhancers = (window).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 const enhancers = composeEnhancers(applyMiddleware(...middlewares));
 
-export const Store = createStore(rootReducer, initialState, enhancers);
+export const Store = createStore(rootReducer, initialState, enhancers);
+
+epicMiddleware.run(rootEpic);

app/features/signup/actionSignup.js

@@ -1,9 +1,15 @@
 export const TypeActionHome = {
     checkLogin : "AuthInfo > checkLogin",
+    setLogin : "AuthInfo > setLogin",
+
     signupUser : "Home > signupUser",
 };
 
-export const isLoggedIn = () => ({
+export const actionCheckIsLoggedIn = () => ({
     type: TypeActionHome.checkLogin,
-    isLoggedIn: true
+});
+
+export const actionSetIsLoggedIn = (status) => ({
+    type: TypeActionHome.setLogin,
+    status
 });

app/features/signup/epicSignup.js

@@ -0,0 +1,19 @@
+import {ofType} from "redux-observable";
+import {actionSetIsLoggedIn, TypeActionHome} from "./actionSignup";
+
+import {switchMap} from 'rxjs/operators';
+import {from} from "rxjs";
+
+export const epicChecklogin = ( action$, state$ ) => 
+    action$.pipe(
+        ofType(TypeActionHome.checkLogin),
+        switchMap(
+            () => {
+                const actions = [
+                    actionSetIsLoggedIn(true),
+                ];
+
+                return from(actions);
+            }
+        )
+    );

app/features/signup/index.js

@@ -1,14 +1,16 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 
-import isLoggedIn from "./actionSignup";
+import {actionCheckIsLoggedIn} from "./actionSignup";
 
 class _Signup extends Component {
     render (){
         const props = this.props;
+        console.log(props)
         return (
             <div>
                 <h4>Status: {props.status.toString()}</h4>
+                <button onClick={props.onLoadCheckLogin}>Login please</button>
             </div>
         );
     }
@@ -18,8 +20,8 @@ const mapState = (state) => ({
     status: state.reducerSignup.isLoggedIn
 })
 
-const mapDispatch = (state) => ({
-
+const mapDispatch = (dispatch) => ({
+    onLoadCheckLogin: () => dispatch(actionCheckIsLoggedIn())
 })
 
 export default connect(mapState, mapDispatch)(_Signup);

app/features/signup/reducerSignup.js

@@ -7,11 +7,11 @@ const initialState = {
 
 export default (state = initialState, action) => {
     switch(action.type) {
-        case TypeActionHome.checkLogin:
+        case TypeActionHome.setLogin:
             return Object.assign(
                 {},
                 state,
-                {isLoggedIn: action.isLoggedIn}
+                {isLoggedIn: action.status}
             )
 
         default: 

package-lock.json

@@ -15,7 +15,6 @@
     "react-redux": "^5.0.7",
     "redux": "^4.0.0",
     "redux-observable": "^1.0.0",
-    "redux-thunk": "^2.3.0",
     "rxjs": "^6.3.3"
   },
   "devDependencies": {