Redux -> add async thunk & slicer for websocket usage

src/redux/asyncThunks/renderWebsocketAsyncThunk.js

@@ -0,0 +1,91 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import GeneralAddress from './abstractAddress'
+
+let endpoint_single_image = '/render/single/image/'
+let endpoint_single_set = '/render/single/set/'
+let endpoint_all = '/render/all/'
+
+let endpoint_vector_single_image = '/render/vector/single/image/'
+let endpoint_vector_single_set = '/render/vector/single/set/'
+
+
+const __uuidv4 = () => {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
+        /[xy]/g,
+        (c) => {
+                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+                return v.toString(16);
+        }
+    )
+}
+
+/**
+ * 
+ * @param {string} endpoint:
+ *      examples:
+ *          'image' - connect to single image ws renderer 
+ *          'set' - connect to single set ws renderer
+ *          'all' - connect to all ws renderer
+ * 
+ *          'vector/image' - connect to vector single image ws renderer
+ *          'vector/set' - connerct to vector single set ws renderer
+ */
+const __make_address = async (endpoint) => {
+    if (endpoint === 'image')
+        endpoint = endpoint_single_image
+    else if (endpoint === 'set')
+        endpoint = endpoint_single_set
+    else if (endpoint === 'all')
+        endpoint = endpoint_all
+    else if (endpoint === 'vector/image')
+        endpoint = endpoint_vector_single_image
+    else if (endpoint === 'vector/set')
+        endpoint = endpoint_vector_single_set
+
+    return GeneralAddress + endpoint
+}
+
+const fetchConnect = createAsyncThunk(
+    'render/async/fetchConnect',
+    async (
+        endpoint,
+        thunkAPI
+    ) => {
+        let uuid = __uuidv4()
+        let address = __make_address(endpoint)
+        return {
+            web_socket: new WebSocket(address + uuid),
+            address: address,
+            room_uuid: uuid
+        }
+    }
+)
+
+const fetchSaveMessage = createAsyncThunk(
+    'render/async/fetchSaveMessage',
+    async (
+        message,
+        thunkAPI
+    ) => {
+        return {
+            message: message
+        }
+    }
+)
+
+const fetchDisconnect = createAsyncThunk(
+    'render/async/fetchDisconnect',
+    async (
+        thunkAPI
+    ) => {
+        return {
+            web_socket: null,
+        }
+    }
+)
+
+export default {
+    fetchConnect,
+    fetchSaveMessage,
+    fetchDisconnect,
+}

src/redux/slices/renderWebsocketSlice.js

@@ -0,0 +1,42 @@
+import { createSlice } from '@reduxjs/toolkit'
+import renderWebsocketAsyncThunk from '../asyncThunks/renderWebsocketAsyncThunk'
+
+const renderWebsocketSlice = createSlice(
+    {
+        name: 'render/async',
+        initialState: {
+            web_socket: null,
+            address: '',
+            room_uuid: '',
+            messages: [],
+            connected: false
+        },
+        reducers: {},
+        extraReducers: {
+            [renderWebsocketAsyncThunk.fetchConnect.fulfilled.type]: (state, action) => {
+                state.web_socket = action.web_socket
+                state.address = action.address
+                state.room_uuid = action.room_uuid
+                state.messages = []
+                state.connected = true
+            },
+            [renderWebsocketAsyncThunk.fetchSaveMessage.fulfilled.type]: (state, action) => {
+                state.messages = [
+                    ...state.messages,
+                    action.message
+                ]
+            },
+            [renderWebsocketAsyncThunk.fetchDisconnect.fulfilled.type]: (state, action) => {
+                state.web_socket = action.web_socket,
+                state.address = '',
+                state.room_uuid = '',
+                state.messages = [],
+                state.connected = false
+            }
+        }
+    }
+)
+
+export const userAuthReducer = userAuthSlice.reducer
+
+export const userAuthSelector = state => state.userAuthReducer