Rewrote slice logic

frontend/src/Container/Chat/Chat.js

 import React, {useState, useRef, useEffect} from "react";
 import { useSelector, shallowEqual, useDispatch } from "react-redux";
-import { getAllMessages, getMessages, getOnlineUser, deleteOflineUser } from "../../Store/Services/messagesSlice";
+import { getAllMessages, getMessages, getOnlineUser, deleteOfflineUser } from "../../Store/Services/messagesSlice";
 import UserList from "../../Components/UserList/UserList";
 import ChatWindow from "../../Components/ChatWindow/ChatWindow";
 import './Chat.css';
@@ -36,7 +36,7 @@ const Chat = () => {
                 dispatch(getOnlineUser(decodedMessage.user));
             };
             if(decodedMessage.type === 'CLOSED_CHAT_USER') {
-                dispatch(deleteOflineUser(decodedMessage.id));
+                dispatch(deleteOfflineUser(decodedMessage.id));
             };
         };
 

frontend/src/Store/Services/messagesSlice.js

 import {createSlice} from "@reduxjs/toolkit";
 
+const namespace = 'messages'
 
 const initialState = {
     messages: [],
@@ -8,7 +9,7 @@ const initialState = {
 
 
 const messagesSlice = createSlice({
-    name: 'messages',
+    name: namespace,
     initialState,
     reducers: {
         getMessages: (state, action) => {
@@ -20,7 +21,7 @@ const messagesSlice = createSlice({
         getOnlineUser: (state, action) => {
             state.users = action.payload;
         },
-        deleteOflineUser: (state, action) => {
+        deleteOfflineUser: (state, action) => {
             const index = state.users.findIndex(user => user._id === action.payload);
             state.users.splice(index, 1);
         }
@@ -28,5 +29,5 @@ const messagesSlice = createSlice({
 });
 
 
-export const {getMessages, getAllMessages, getOnlineUser, deleteOflineUser} = messagesSlice.actions;
-export default messagesSlice.reducer;
\ No newline at end of file
+export const {getMessages, getAllMessages, getOnlineUser, deleteOfflineUser} = messagesSlice.actions;
+export default messagesSlice;
\ No newline at end of file

frontend/src/Store/Services/usersSlice.js

 import {createSlice, createAsyncThunk} from "@reduxjs/toolkit";
 import axios from "../../AxiosBaseUrl";
 
+const namespace = 'users'
+
 const initialState = {
     user: null,
     isLoading: false,
@@ -12,7 +14,7 @@ const initialState = {
 };
 
 export const loginUser = createAsyncThunk(
-    'users/login',
+    `${namespace}/loginUser`,
     async (payload, thunkApi) => {
         try {
             const res = await axios.post('/users/sessions', payload.userData);
@@ -29,7 +31,7 @@ export const loginUser = createAsyncThunk(
 );
 
 export const registerUser = createAsyncThunk(
-    'users/register',
+    `${namespace}/registerUser`,
     async (payload, thunkApi) => {
         try {
             return await axios.post('/users', payload.userData).then(res => res.data);
@@ -44,7 +46,7 @@ export const registerUser = createAsyncThunk(
 );
 
 export const userLogout = createAsyncThunk(
-    'logout/users',
+    `${namespace}/userLogout`,
     async (payload, thunkAPI) => {
         try {
             const token = thunkAPI.getState().users.token;
@@ -60,7 +62,7 @@ export const userLogout = createAsyncThunk(
 );
 
 const usersSlice = createSlice({
-    name: 'users',
+    name: namespace,
     initialState,
     reducers: {
         getMessages: (state, action) => {
@@ -79,38 +81,43 @@ const usersSlice = createSlice({
             state.user = null;
         }
     },
-    extraReducers: {
-        [registerUser.pending]: (state) => {
+    extraReducers: (builder) => {
+        builder
+        .addCase(registerUser.pending, (state) => {
             state.isLoading = true;
             state.loginError = null;
             state.global = null;
             state.registerError = null;
-        },
-        [registerUser.rejected]: (state, action) => {
+        })
+        .addCase(registerUser.rejected, (state, action) => {
             state.isLoading = false;
             state.error = action.error;
-        },
-        [registerUser.fulfilled]: (state, action) => {
-            state.registerStatus = action.payload.user;
+        })
+        .addCase(registerUser.fulfilled, (state, action) => {
             state.isLoading = false;
-        },
-        [loginUser.pending]: (state) => {
+            if (action.payload.user){
+                state.registerStatus = action.payload.user;
+            }
+        })
+        .addCase(loginUser.pending, (state) => {
             state.isLoading = true;
             state.loginError = null;
             state.global = null;
             state.registerError = null;
-        },
-        [loginUser.rejected]: (state, action) => {
+        })
+        .addCase(loginUser.rejected, (state, action) => {
             state.isLoading = false;
             state.error = action.error;
-        },
-        [loginUser.fulfilled]: (state, action) => {
-            state.user = action.payload;
+        })
+        .addCase(loginUser.fulfilled, (state, action) => {
             state.isLoading = false;
-        }
+            if (action.payload){
+                state.user = action.payload;
+            }
+        })
     }
 });
 
 
 export const {catchLoginError, catchRegisterError, globalError, logoutUser, getMessages} = usersSlice.actions;
-export default usersSlice.reducer;
\ No newline at end of file
+export default usersSlice;
\ No newline at end of file

frontend/src/Store/store.js

+import { configureStore } from "@reduxjs/toolkit";
+import usersReducer from './Services/usersSlice'
+import messagesReducer from './Services/messagesSlice'
+
+export const store = configureStore({
+    reducer: {
+            users: usersReducer.reducer,
+            messages: messagesReducer.reducer
+        }
+    });
\ No newline at end of file

frontend/src/index.js

@@ -3,17 +3,8 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import { Provider } from 'react-redux';
-import { configureStore } from '@reduxjs/toolkit';
-import usersReducer from './Store/Services/usersSlice.js';
-import messagesReducer from './Store/Services/messagesSlice.js';
 import reportWebVitals from './reportWebVitals';
-
-const store = configureStore({
-  reducer: {
-    users: usersReducer,
-    messages: messagesReducer
-  }
-});
+import { store } from './Store/store';
   
 
 const root = ReactDOM.createRoot(document.getElementById('root'));