From 1302d4c7497299dea3bb9865050594d59de0ecc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Wed, 7 Feb 2024 13:51:41 +0900 Subject: [PATCH] =?UTF-8?q?Redux-toolkit=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/_redux/features/basis/drone/droneSlice.ts | 18 ++++ src/_redux/features/basis/drone/droneState.ts | 95 +++++++++++++++++++ src/_redux/features/basis/drone/droneThunk.ts | 21 ++++ src/_redux/rootReducer.ts | 11 +++ src/_redux/store.ts | 17 ++++ src/components/basis/dron/BasisIdntform.js | 22 ++++- src/index.js | 1 + src/redux/reducers/rootReducer.ts | 9 +- src/redux/storeConfig/store.ts | 10 +- 10 files changed, 200 insertions(+), 5 deletions(-) create mode 100644 src/_redux/features/basis/drone/droneSlice.ts create mode 100644 src/_redux/features/basis/drone/droneState.ts create mode 100644 src/_redux/features/basis/drone/droneThunk.ts create mode 100644 src/_redux/rootReducer.ts create mode 100644 src/_redux/store.ts diff --git a/package.json b/package.json index be60c9ca..379cb56a 100644 --- a/package.json +++ b/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", diff --git a/src/_redux/features/basis/drone/droneSlice.ts b/src/_redux/features/basis/drone/droneSlice.ts new file mode 100644 index 00000000..260cadbc --- /dev/null +++ b/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; diff --git a/src/_redux/features/basis/drone/droneState.ts b/src/_redux/features/basis/drone/droneState.ts new file mode 100644 index 00000000..4edfad0f --- /dev/null +++ b/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; +} diff --git a/src/_redux/features/basis/drone/droneThunk.ts b/src/_redux/features/basis/drone/droneThunk.ts new file mode 100644 index 00000000..26136842 --- /dev/null +++ b/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); + } + } +); diff --git a/src/_redux/rootReducer.ts b/src/_redux/rootReducer.ts new file mode 100644 index 00000000..a44abadb --- /dev/null +++ b/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; diff --git a/src/_redux/store.ts b/src/_redux/store.ts new file mode 100644 index 00000000..a3f53cf8 --- /dev/null +++ b/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; +export const useSelector: TypedUseSelectorHook = useSelectors; + +type AppDispatch = typeof store.dispatch; +export const useDispatch = () => useDispatchs(); diff --git a/src/components/basis/dron/BasisIdntform.js b/src/components/basis/dron/BasisIdntform.js index 0af18506..c479fb97 100644 --- a/src/components/basis/dron/BasisIdntform.js +++ b/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 ( @@ -160,6 +179,7 @@ export const BasisIdntfForm = props => { props.data[i].id ) } + // onClick={testHandler} outline {...(props.data[i].disabled === undefined ? { disabled: false } diff --git a/src/index.js b/src/index.js index 8c6abbd9..77e5b56d 100644 --- a/src/index.js +++ b/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'; diff --git a/src/redux/reducers/rootReducer.ts b/src/redux/reducers/rootReducer.ts index 0d099998..df81f4fa 100644 --- a/src/redux/reducers/rootReducer.ts +++ b/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; diff --git a/src/redux/storeConfig/store.ts b/src/redux/storeConfig/store.ts index 5746b0fd..bbc39585 100644 --- a/src/redux/storeConfig/store.ts +++ b/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; export const useSelector: TypedUseSelectorHook = useSelectors; + +type AppDispatch = typeof store.dispatch; +export const useDispatch = () => useDispatchs(); export { store };