Redux-toolkit 작업

package.json

@@ -15,6 +15,7 @@
     "@hookform/resolvers": "1.3.4",
     "@mapbox/mapbox-gl-draw": "1.4.3",
     "@mapbox/mapbox-gl-language": "1.0.1",
+    "@reduxjs/toolkit": "^1.9.7",
     "@stomp/stompjs": "^6.1.0",
     "@turf/turf": "6.5.0",
     "@types/googlemaps": "^3.43.3",

src/_redux/features/basis/drone/droneSlice.ts

@@ -0,0 +1,18 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { initDron } from './droneState';
+import { getDroneList } from './droneThunk';
+
+const droneSlice = createSlice({
+  name: 'droneSlice',
+  initialState: initDron,
+  reducers: {},
+  extraReducers: builder => {
+    builder.addCase(getDroneList.fulfilled, (state, action) => {
+      const data = action.payload;
+      state.droneList = data.items;
+      state.droneTotal = data.total;
+    });
+  }
+});
+
+export const droneReducer2 = droneSlice.reducer;

src/_redux/features/basis/drone/droneState.ts

@@ -0,0 +1,95 @@
+export const initDron: IDroneState = {
+  droneList: undefined,
+  droneTotal: 0,
+  droneDetail: undefined,
+
+  idntfList: undefined,
+  idntfCount: 0,
+
+  selectGroup: undefined,
+  isRefreshIdntf: false,
+  page: 1
+};
+
+export interface IDroneState {
+  droneList: IDrone[] | undefined;
+  droneTotal: number | 0;
+  droneDetail: IDrone | undefined;
+
+  idntfList: IIdntf[] | undefined;
+  idntfCount: number | 0;
+
+  selectGroup: ISelectGroup | undefined;
+  isRefreshIdntf: boolean | false;
+  page: number | 1;
+}
+
+export interface ISelectGroup {
+  groupId: string;
+  groupNm: string;
+}
+
+export interface IDrone {
+  groupId: string;
+  arcrftSno: number;
+  arcrftHght: number;
+  arcrftLngth: number;
+  arcrftModelNm: string;
+  arcrftTypeCd: string;
+  arcrftWdth: number;
+  arcrftWght: number;
+  cameraYn: string;
+  createDt: string;
+  createUserId: string;
+  insrncYn: string;
+  prdctCmpnNm: string;
+  prdctNum: string;
+  takeoffWght: number;
+  updateDt: string;
+  updateUserId: string;
+  wghtTypeCd: string;
+}
+
+export interface ICreateDroneRq {
+  arcrftModelNm: string;
+  arcrftTypeCd: string;
+  cameraYn: string;
+  createUserId: string;
+  groupId: string;
+  groupNm: string;
+  imageUrl: string;
+  insrncYn: string;
+  prdctCmpnNm: string;
+  prdctNum: string;
+  updateUserId: string;
+  wghtTypeCd: string;
+}
+
+export interface IUpdateDroneRq extends ICreateDroneRq {
+  arcrftSno: number;
+}
+
+export interface IIdntf {
+  idntfNum: string;
+  arcrftSno: number;
+  idntfTypeCd: string;
+  ownerNm: string;
+  hpno: string;
+  updateDt: string;
+  createDt: string;
+  cstmrSno: number;
+  groupId: string;
+}
+
+export interface ICreateIdntfRq {
+  idntfNum: string;
+  idntfTypeCd: string;
+  ownerNm: string;
+  hpno: string;
+}
+
+export interface IUpdateIdntfRq {
+  idntfNum: string;
+  ownerNm: string;
+  hpno: string;
+}

src/_redux/features/basis/drone/droneThunk.ts

@@ -0,0 +1,21 @@
+import axios from '../../../../modules/utils/customAxiosUtil';
+import qs from 'qs';
+
+import { createAsyncThunk } from '@reduxjs/toolkit';
+
+// 드론 목록 조회
+export const getDroneList = createAsyncThunk(
+  'basis/getDroneList',
+  async (data: any) => {
+    try {
+      const queryString = qs.stringify(data, {
+        addQueryPrefix: true,
+        arrayFormat: 'repeat'
+      });
+      const res = await axios.get(`api/bas/dron/list${queryString}`);
+      return res.data;
+    } catch (error) {
+      console.error(error);
+    }
+  }
+);

src/_redux/rootReducer.ts

@@ -0,0 +1,11 @@
+import { combineReducers } from '@reduxjs/toolkit';
+import { droneReducer2 } from './features/basis/drone/droneSlice';
+
+const rootReducer = (state: any, action: any) => {
+  const combineReducer = combineReducers({
+    drone: droneReducer2
+  });
+
+  return combineReducer(state, action);
+};
+export default rootReducer;

src/_redux/store.ts

@@ -0,0 +1,17 @@
+import { configureStore } from '@reduxjs/toolkit';
+import rootReducer from './rootReducer';
+import {
+  TypedUseSelectorHook,
+  useDispatch as useDispatchs,
+  useSelector as useSelectors
+} from 'react-redux';
+
+export const store = configureStore({
+  reducer: rootReducer
+});
+
+export type RootState = ReturnType<typeof rootReducer>;
+export const useSelector: TypedUseSelectorHook<RootState> = useSelectors;
+
+type AppDispatch = typeof store.dispatch;
+export const useDispatch = () => useDispatchs<AppDispatch>();

src/components/basis/dron/BasisIdntform.js

@@ -14,9 +14,28 @@ import {
 import { X } from 'react-feather';
 
 import Repeater from '@core@components/repeater';
+import { getDroneList } from '../../../_redux/features/basis/drone/droneThunk';
+import { useEffect } from 'react';
+// import { useDispatch, useSelector } from '../../../redux/storeConfig/store';
+import { useDispatch, useSelector } from '../../../_redux/store';
 
 export const BasisIdntfForm = props => {
-  console.log(props.data);
+  // console.log(props.data);
+  // const dispatch = useDispatch();
+  // const droneList = useSelector(state => state.drone.droneList);
+
+  // useEffect(() => {
+  //   console.log(droneList, '---list');
+  // }, [droneList]);
+
+  // const testHandler = () => {
+  //   dispatch(
+  //     getDroneList({
+  //       groupId: 'C807F9',
+  //       page: 1
+  //     })
+  //   );
+  // };
   return (
     <Row>
       <Col>
@@ -160,6 +179,7 @@ export const BasisIdntfForm = props => {
                                       props.data[i].id
                                     )
                                   }
+                                  // onClick={testHandler}
                                   outline
                                   {...(props.data[i].disabled === undefined
                                     ? { disabled: false }

src/index.js

@@ -8,6 +8,7 @@ import { HelmetProvider } from 'react-helmet-async';
 // ** Redux Imports
 import { Provider } from 'react-redux';
 import { store } from './redux/storeConfig/store';
+import { store as store2 } from './_redux/store';
 
 // ** Toast & ThemeColors Context
 import { ToastContainer } from 'react-toastify';

src/redux/reducers/rootReducer.ts

@@ -17,7 +17,7 @@ import {
 import { accountSaga, accountReducer } from '../../modules/account/register';
 import {
   analysisHistorySaga,
-  analysisHistoryReducer
+  historyReducer
 } from '../../modules/analysis/history';
 import {
   analysisSimulatorSaga,
@@ -42,6 +42,7 @@ import { laancSaga, laancReducer } from '../../modules/laanc';
 import { mainDashSaga, mainDahReducer } from '../../modules/main/dash';
 import { menuReducer } from '../../modules/menu';
 import { statisticsSaga, statisticsReducer } from '../../modules/statistics';
+import { droneReducer2 } from '../../_redux/features/basis/drone/droneSlice';
 
 export function* saga() {
   yield all([fork(mainDashSaga)]);
@@ -80,13 +81,15 @@ const rootReducer = combineReducers({
   controlGpCountState: controlGpCountReducer,
   controlGpFltPlanState: controlGpFltPlanReducer,
   menuState: menuReducer,
-  analysisHistoryState: analysisHistoryReducer,
+  analysisHistoryState: historyReducer,
   analysisSimulatorState: analysisSimulatorReducer,
   ControlGpWeatherState: controlGpReducer,
   findState: findReducer,
   faqState: faqReducer,
   qnaState: qnaReducer,
-  statisticsState: statisticsReducer
+  statisticsState: statisticsReducer,
+
+  droneState2: droneReducer2
 });
 
 export default rootReducer;

src/redux/storeConfig/store.ts

@@ -4,7 +4,11 @@ import createDebounce from 'redux-debounced';
 import rootReducer, { saga } from '../reducers/rootReducer';
 import { createStore, applyMiddleware, compose } from 'redux';
 import createSagaMiddleware from 'redux-saga';
-import { TypedUseSelectorHook, useSelector as useSelectors } from 'react-redux';
+import {
+  TypedUseSelectorHook,
+  useSelector as useSelectors,
+  useDispatch as useDispatchs
+} from 'react-redux';
 
 // ** init middleware
 
@@ -28,6 +32,10 @@ const store = createStore(
 );
 sagaMiddleware.run(saga);
 
+// hooks
 export type RootState = ReturnType<typeof rootReducer>;
 export const useSelector: TypedUseSelectorHook<RootState> = useSelectors;
+
+type AppDispatch = typeof store.dispatch;
+export const useDispatch = () => useDispatchs<AppDispatch>();
 export { store };