feat: add redux toolkit and fix auth HOC

client/package.json

@@ -27,6 +27,7 @@
     "webpack-merge": "^4.1.0"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.1",
     "axios": "^0.27.2",
     "parcel": "^2.8.0",
     "prop-types": "^15.7.2",

client/src/app.js

@@ -1,23 +1,18 @@
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { createStore, applyMiddleware } from 'redux';
 import { HashRouter, Route, Routes } from 'react-router-dom';
-import reduxThunk from 'redux-thunk';
 import Header from './components/header';
 import Home from './components/home';
 import Public from './components/public';
 import Account from './components/account';
 import Signin from './components/auth/signin';
 import Signup from './components/auth/signup';
 import Signout from './components/auth/signout'
-import RequireAuth from './components/auth/require_auth';
-import reducers from './reducers';
+import AuthComponent from './components/auth/require_auth';
 import { AUTH_USER } from './actions/types';
-
+import { store } from './store';
 import '../style/style.scss'
 
-const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
-const store = createStoreWithMiddleware(reducers)
 const token = localStorage.getItem('auth_jwt_token');
 
 // if we have a token, consider the user to be signed in
@@ -32,7 +27,7 @@ ReactDOM.render(
         <Routes>
           <Route exact path="/" element= {<Home/>} />
           <Route path="/public" element= {<Public/>} />
-          <Route path="/account" element= {RequireAuth(<Account />)} />
+          <Route path="/account" element= {<AuthComponent Component={Account}/>} />
           <Route path="/signin" element= {<Signin/>} />
           <Route path="/signup" element= {<Signup/>} />
           <Route path="/signout" element= {<Signout/>} />

client/src/components/auth/require_auth.js

@@ -2,20 +2,18 @@ import { useEffect } from 'react';
 import { connect } from 'react-redux';
 import { useNavigate } from "react-router-dom";
 
-export default function(ComposedComponent) {
-  const Authentication = (props) => {
-    const navigate = useNavigate()
-    useEffect(() => {
-      if (!props.authenticated) {
-        navigate('/signin')
-      }
-    }, [props.authenticated])
-    return <ComposedComponent {...props} />
-  }
+const AuthComponent = ({ Component, ...props }) => {
+  const navigate = useNavigate()
+  useEffect(() => {
+    if (!props.authenticated) {
+      navigate('/signin')
+    }
+  }, [])
 
-  function mapStateToProps({auth}) {
-    return { authenticated: auth.authenticated };
-  }
+  return <Component {...props} />
+}
 
-  return connect(mapStateToProps)(Authentication);
-}
+function mapStateToProps({auth}) {
+  return { authenticated: auth.authenticated };
+}
+export default connect(mapStateToProps)(AuthComponent)

client/src/reducers/index.js

@@ -1,11 +1,7 @@
-import { combineReducers } from 'redux';
-
 import auth from './auth_reducer';
 import user from './user_reducer';
 
-const rootReducer = combineReducers({
-  auth,
-  user
-});
-
-export default rootReducer;
+export default {
+  user,
+  auth
+};

client/src/store.js

@@ -0,0 +1,10 @@
+import { configureStore } from '@reduxjs/toolkit'
+import slices from './slices'
+import reducers from './reducers'
+export const store = configureStore({
+  reducer: {...slices, ...reducers},
+  middleware: (getDefaultMiddleware) =>
+  getDefaultMiddleware({
+    serializableCheck: false
+  })
+})