#9: Add support for state plugin in browser

client/.eslintrc

@@ -28,6 +28,7 @@
         "plugin:prettier/recommended"
     ],
     "rules": {
+        "no-underscore-dangle": "off",
         "semi": "off",
         "react/jsx-one-expression-per-line": "off",
         "prettier/prettier": [

client/Redux-readme.txt

 npm install redux react-redux
-npm install @reduxjs/toolkit
\ No newline at end of file
+npm install @reduxjs/toolkit
+
+npm install react-axios
+npm install axios
\ No newline at end of file

client/package-lock.json

@@ -12804,6 +12804,11 @@
         "whatwg-fetch": "^3.4.1"
       }
     },
+    "react-axios": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-axios/-/react-axios-2.0.4.tgz",
+      "integrity": "sha512-QsTq7C/NwsjfrSmFVxPo29BdX6DtLpRF0fZTJv5/R4BanOm+c4639B3Xb4lF83ZfAOX5IW8XG7htz4V+WNF+WA=="
+    },
     "react-dev-utils": {
       "version": "11.0.3",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.3.tgz",

client/package.json

@@ -17,6 +17,7 @@
     "axios": "^0.21.1",
     "formik": "^2.2.6",
     "react": "^17.0.1",
+    "react-axios": "^2.0.4",
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",

client/src/actions/communication.js

+import Types from "./types.js";
+
+export function axiosPost(path, data, config = undefined, 
+        startCB = undefined, successCB = undefined, errorCB = undefined){
+    return {
+        type: Types.AXIOS_POST,
+        path, 
+        data,
+        config,
+        startCB,
+        successCB,
+        errorCB
+    }
+}
+
+export function axiosPostSuccess(path, data, previousAction){
+    return {
+        type: Types.AXIOS_POST_SUCCESS,
+        path,
+        data,
+        previousAction
+    }
+}
+
+export function axiosPostError(path, data, previousAction){
+    return {
+        type: Types.AXIOS_POST_ERROR,
+        path,
+        data,
+        previousAction
+    }
+}
+
+export function axiosGet(path, data, config = undefined, startCB = undefined, successCB = undefined, errorCB = undefined) {
+    return {
+        type: Types.AXIOS_GET,
+        path, 
+        data,
+        config,
+        startCB,
+        successCB,
+        errorCB
+    }
+}
+
+export function axiosGetSuccess(path, data, previousAction){
+    return {
+        type: Types.AXIOS_GET_SUCCESS,
+        path,
+        data,
+        previousAction
+    }
+}
+
+export function axiosGetError(path, data, previousAction){
+    return {
+        type: Types.AXIOS_GET_ERROR,
+        path,
+        data,
+        previousAction
+    }
+}

client/src/actions/login.js

+import Types from "./types.js";
+
+export function login(name, email, id, token) {
+    return {
+        type: Types.USER_LOGIN,
+        name,
+        email,
+        id,
+        token
+    }
+}
+
+export function logout() {
+    return {
+        type: Types.USER_LOGOUT,
+    }
+}

client/src/actions/types.js

+export default {
+    AXIOS_GET: "AXIOS_GET",
+    AXIOS_GET_SUCCESS: "AXIOS_GET_SUCCESS",
+    AXIOS_GET_ERROR: "AXIOS_GET_ERROR",
+
+    AXIOS_POST: "AXIOS_POST",
+    AXIOS_POST_SUCCESS: "AXIOS_POST_SUCCESS",
+    AXIOS_POST_ERROR: "AXIOS_POST_ERROR",
+
+    USER_LOGIN: "USER_LOGIN",
+    USER_LOGOUT: "USER_LOGOUT",
+
+}

client/src/index.tsx

 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
-import { createStore } from 'redux'
+import { compose, createStore } from 'redux'
 import App from './App'
 import './index.css'
 import allReducers from './reducers/allReducers'
 import reportWebVitals from './reportWebVitals'
 
-/*  
+/*
   TypeScript does not know the type of the property. 
   Therefore, you will get the error; Property ‘__REDUX_DEVTOOLS_EXTENSION_COMPOSE__’ 
   does not exist on type ‘Window’. Hence, you need to add the property to the global window as below.
-
+*/
 declare global {
   interface Window {
-    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose
+    __REDUX_DEVTOOLS_EXTENSION__: typeof compose
   }
 }
 
-
 // Create an Advanced global store with the name "store"
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose // allows Mozilla plugin to view state in a GUI, https://github.com/zalmoxisus/redux-devtools-extension#13-use-redux-devtools-extension-package-from-npm
-const store = createStore(
-  allReducers,
-  composeEnhancers(applyMiddleware(axiosMiddleware))
-)
+// const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose // allows Mozilla plugin to view state in a GUI, https://github.com/zalmoxisus/redux-devtools-extension#13-use-redux-devtools-extension-package-from-npm
+// const store = createStore(allReducers, composeEnhancers(applyMiddleware()))
 
 // simple store with plugin
 const store = createStore(
   allReducers,
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 )
-*/
-const store = createStore(allReducers)
 
 // Provider wraps the app component so that it can access store
 ReactDOM.render(

client/src/middleware/axios.js

-// import Axios from "axios";
\ No newline at end of file

client/src/reducers/allReducers.js

@@ -5,6 +5,7 @@ import { combineReducers } from 'redux';
 import loggedInReducer from './isLoggedIn';
 
 const allReducers = combineReducers({
-    loggedInReducer // same as writing "loggedInReducer: logedInReducer" 
-})
+    // name: state
+    isLoggedIn: loggedInReducer // You can write "loggedInReducer" because its the same as "loggedInReducer: loggedInReducer"
+});
 export default allReducers;
\ No newline at end of file