[FEAT] #16 - Add tableSlice

client/src/App.js

@@ -1,4 +1,6 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { Provider } from "react-redux";
+import { store } from "./store";
 import Login from "./pages/Login";
 import AllDataBases from "./pages/AllDataBases";
 import InsideDataBase from "./pages/InsideDataBase";
@@ -7,18 +9,20 @@ function App() {
   const isAuthorized = localStorage.getItem("isAuthorized");
 
   return (
-    <BrowserRouter>
-      {/* {!isAuthorized ? (
+    <Provider store={store}>
+      <BrowserRouter>
+        {/* {!isAuthorized ? (
         <Navigate replace to="/login" />
       ) : (
         <Navigate replace to="/" />
       )} */}
-      <Routes>
-        <Route path="/login" element={<Login />} />
-        <Route exact path="/" element={<AllDataBases />} />
-        <Route path="/:dbName" element={<InsideDataBase />} />
-      </Routes>
-    </BrowserRouter>
+        <Routes>
+          <Route path="/login" element={<Login />} />
+          <Route exact path="/" element={<AllDataBases />} />
+          <Route path="/:dbName" element={<InsideDataBase />} />
+        </Routes>
+      </BrowserRouter>
+    </Provider>
   );
 }
 

client/src/__mocks/TableMocks.js

@@ -2,7 +2,6 @@ const tables = [
   {
     id: 1,
     title: "user",
-    name: "name",
   },
   {
     id: 2,

client/src/store/index.js

@@ -1,8 +1,11 @@
 import { configureStore, MiddlewareArray } from "@reduxjs/toolkit";
 import logger from "./loggerMiddleware";
+import { tableSlice } from "./tableSlice";
 
 export const store = configureStore({
-  reducer: {},
+  reducer: {
+    table: tableSlice.reducer,
+  },
   middleware: new MiddlewareArray().concat(logger),
   devTools: process.env.NODE_ENV !== "production",
 });

client/src/store/tableSlice.js

@@ -0,0 +1,26 @@
+/* eslint-disable no-param-reassign */
+import { createSlice, PayloadAction, createAsyncThunk } from "@reduxjs/toolkit";
+import axios from "../common/axios";
+
+const name = "table";
+
+const initialState = {
+  isAddClick: false,
+  tables: [],
+};
+
+export const tableSlice = createSlice({
+  name,
+  initialState,
+  reducers: {
+    getTables: (state, action) => {
+      state.tables = [...action.payload];
+    },
+    add: (state, action) => {
+      state.isAddClick = action.payload; // 상태 변경 예시 1
+    },
+  },
+  extraReducers: {},
+});
+
+export const { getTables, add } = tableSlice.actions;