Update redux

package.json

@@ -14,7 +14,8 @@
   "main": "server.js",
   "scripts": {
     "start": "node server.js",
-    "dev": "concurrently \"NODE_ENV=development nodemon --trace-warnings server.js\" \"npm run webpack:dev\"",
+    "start:dev": "NODE_ENV=development nodemon --trace-warnings server.js",
+    "dev": "concurrently \"npm run start:dev\" \"npm run webpack:dev\"",
     "lint": "eslint --ext .jsx --ext .js server.js src/** web/js/**",
     "lint:format": "eslint --ext .jsx --ext .js server.js src/** web/js/** --fix",
     "build": "npm run webpack:build",
@@ -37,6 +38,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@reduxjs/toolkit": "^2.0.1",
     "@sendgrid/mail": "^8.1.0",
     "@stanlemon/webdev": "^0.1.145",
     "bcryptjs": "^2.4.3",
@@ -61,9 +63,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-fontawesome": "^1.7.1",
-    "react-redux": "^8.1.3",
-    "redux": "^4.2.1",
-    "redux-thunk": "^2.4.2",
+    "react-redux": "^9.0.3",
     "rsuite": "^5.47.0",
     "serve-static": "^1.15.0",
     "shortid": "^2.2.16",

web/js/reducers/index.js

@@ -27,6 +27,16 @@ import {
   GET_TASK_ERROR,
 } from "../actions/";
 
+export const initialState = {
+  user: null,
+  tags: [],
+  filter: FILTER_ALL,
+  page: 1,
+  tasks: {},
+  loaded: [],
+  errors: [],
+};
+
 // Ensure that we have valid dates in our tasks objects
 function formatTaskDates(task) {
   return Object.assign({}, task, {
@@ -37,7 +47,7 @@ function formatTaskDates(task) {
   });
 }
 
-export function tags(state, action) {
+export function tags(state = initialState.tags, action) {
   switch (action.type) {
     case LOAD_TAGS_SUCCESS:
       return [...action.tags];
@@ -46,7 +56,7 @@ export function tags(state, action) {
   }
 }
 
-export function tasks(state, action) {
+export function tasks(state = initialState.tasks, action) {
   switch (action.type) {
     case GET_TASK_SUCCESS:
       return {
@@ -78,7 +88,7 @@ export function tasks(state, action) {
   }
 }
 
-export function user(state, action) {
+export function user(state = initialState.user, action) {
   switch (action.type) {
     case UNAUTHENTICATED_USER:
       return null;
@@ -90,7 +100,7 @@ export function user(state, action) {
   }
 }
 
-export function errors(state, action) {
+export function errors(state = initialState.errors, action) {
   switch (action.type) {
     case ERROR:
     case LOAD_TAGS_ERROR:
@@ -110,7 +120,7 @@ export function errors(state, action) {
   }
 }
 
-export function loaded(state, action) {
+export function loaded(state = initialState.loaded, action) {
   switch (action.type) {
     case LOAD_TAGS_ERROR:
       return uniq([...state, "tags"]);
@@ -130,7 +140,7 @@ export function loaded(state, action) {
   }
 }
 
-export function filter(state, action) {
+export function filter(state = initialState.filter, action) {
   switch (action.type) {
     case SET_FILTER:
       return action.filter;
@@ -139,7 +149,7 @@ export function filter(state, action) {
   }
 }
 
-export function page(state, action) {
+export function page(state = initialState.page, action) {
   switch (action.type) {
     case SET_PAGE:
       return action.page;
@@ -148,18 +158,8 @@ export function page(state, action) {
   }
 }
 
-export const initialState = {
-  user: null,
-  tags: [],
-  filter: FILTER_ALL,
-  page: 1,
-  tasks: {},
-  loaded: [],
-  errors: [],
-};
-
 export function reducers(state = initialState, action) {
-  const y = {
+  return {
     user: user(state.user, action),
     tags: tags(state.tags, action),
     filter: filter(state.filter, action),
@@ -168,8 +168,6 @@ export function reducers(state = initialState, action) {
     loaded: loaded(state.loaded, action),
     errors: errors(state.errors, action),
   };
-  //console.log("redux store = ", y);
-  return y;
 }
 
 export default reducers;

web/js/store/index.js

@@ -1,6 +1,6 @@
-import { createStore, applyMiddleware } from "redux";
-import thunk from "redux-thunk";
-import reducer from "../reducers/";
+import { configureStore } from "@reduxjs/toolkit";
+import { user, tags, filter, page, tasks, loaded, errors } from "../reducers/";
+
 import UserService from "../lib/UserService";
 import TaskService from "../lib/TaskService";
 import TagService from "../lib/TagsService";
@@ -11,9 +11,22 @@ const services = {
   tagService: new TagService(),
 };
 
-const store = createStore(
-  reducer,
-  applyMiddleware(thunk.withExtraArgument(services))
-);
+const store = configureStore({
+  reducer: {
+    user,
+    tags,
+    filter,
+    page,
+    tasks,
+    loaded,
+    errors,
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      thunk: {
+        extraArgument: services,
+      },
+    }),
+});
 
 export default store;