Exposed redux function loadStore

src/index.js

@@ -2,7 +2,7 @@ import 'react-app-polyfill/ie11'; // For IE 11 support
 import 'react-app-polyfill/stable';
 import 'core-js';
 import './polyfill'
-import React from 'react';
+import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
@@ -13,21 +13,32 @@ import { Provider } from 'react-redux'
 import { createStore, applyMiddleware } from 'redux';
 import allReducer from './reducers/index.js';
 import thunk from 'redux-thunk';
+import { setUserName, setLogged, setNotLogged } from './actions';
 
 React.icons = icons
 
-
 let store = createStore(
   allReducer,
   applyMiddleware(thunk)
   + window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );
 
+window.store = store;
+
+window.loadStore = function (storeData) {
+  window.store.dispatch(setUserName(storeData.user));
+  if (storeData.isLogged === true) {
+    window.store.dispatch(setLogged(storeData.isLogged));
+  } else {
+    window.store.dispatch(setNotLogged(storeData.isLogged));
+  }
+}
+
 //store.subscribe(() => console.log(store.getState(allReducer)));
 
 ReactDOM.render(
   <Provider store={store}>
-    <App/>
+    <App />
   </Provider>,
   document.getElementById('root')
 );

src/views/demoComponent/DemoComponent1.js

@@ -1,4 +1,4 @@
-import React, { lazy, useState, useContext } from 'react';
+import React, { lazy, useState, useContext, useEffect } from 'react';
 import {
     CBadge,
     CButton,
@@ -15,7 +15,7 @@ import {
 import CIcon from '@coreui/icons-react';
 import { PDFEngine } from 'PDFEngine';
 
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { setUserName, setLogged, setNotLogged } from '../../actions';
 import { ReactReduxContext } from 'react-redux';
 
@@ -24,15 +24,22 @@ import MainChartExample from '../charts/MainChartExample.js';
 const WidgetsDropdown = lazy(() => import('../widgets/WidgetsDropdown.js'))
 
 
-const DemoComponent1 = () => {
+const DemoComponent1 = (props) => {
 
     const list = [{ name: "Four Cards" }, { name: "Chart1" }, { name: "Chart1 Buttons" }, { name: "Chart1 Legend" }, { name: "Chart2" }, { name: "Table" }];
-
     let textInput = React.createRef();
-    //const user = useSelector(state => state.user);
+    const user = useSelector(state => state.user);
+    const isLogged = useSelector(state => state.isLogged);
     const dispach = useDispatch();
     const { store } = useContext(ReactReduxContext);
+    const [userName, setUserName] = useState();
+
 
+    useEffect(()=>{
+        if(user){
+            setUserName(user);
+        }
+    },[user])
 
     const handleSubmit = (event) => {
         event.preventDefault();
@@ -74,14 +81,15 @@ const DemoComponent1 = () => {
                         <div style={{ display: 'flex', flexDirection: 'row', marginLeft: '10px' }}>
                             <button style={{ marginLeft: '5px' }} className=" btn btn-primary" onClick={exec}>Print view</button>
                         </div>
-                        <form style={{margin: '15px'}} onSubmit={handleSubmit}>
+                        <form style={{ margin: '15px' }} onSubmit={handleSubmit}>
                             <label>
                                 Name:
                                 <input ref={textInput} type="text" onChange={null} />
+                                <p>{userName}</p>
                             </label>
                             <input type="submit" value="Submit" />
-                            <button onClick={() => dispach(setLogged())}>Log in</button>
-                            <button onClick={() => dispach(setNotLogged())}>Log out</button>
+                            <button style={{backgroundColor: isLogged ? "green" : "white"}} onClick={() => dispach(setLogged())}>Log in</button>
+                            <button style={{backgroundColor: isLogged ? "white" : "red"}} onClick={() => dispach(setNotLogged())}>Log out</button>
                             <button onClick={() => GetStore()}>Log Store</button>
                         </form>
                     </div>
@@ -625,4 +633,5 @@ const DemoComponent1 = () => {
         </>
     );
 }
+
 export default DemoComponent1;