[Redux] 네이밍 규칙 샘플

src/modules/_sample/actions/index.ts

@@ -0,0 +1,51 @@
+import { createAsyncAction, ActionType, createAction } from 'typesafe-actions';
+
+/**
+ * [Action 타입]
+ * 대문자와 _를 사용하여 상수 형태로 작성한다.
+ * 경로는 소문자로 작성한다.
+ * 주어를 앞에 명확하게 명시한다.
+ * 비동기 요청 액션이 아닐 땐 DISPATCH_ 로 시작한다.
+ * 목록 안에 상세 목록이 존재할 경우(ex. 비행이력) 상세 목록은 LOG로 작성한다.
+ *
+ * 기본 규칙
+ * 목록 조회 - LIST
+ * 상세 조회(단일) - DETAIL
+ * 생성/추가 - CREATE
+ * 수정/변경 - UPDATE
+ * 삭제 - DELETE
+ *
+ *
+ * [Action 함수]
+ * 카멜케이스를 사용하여 작성한다.
+ * 작성한 Action 타입을 참고하여 작성한다. (ex. DRONE_LIST_REQUEST -> dronList)
+ * 비동기 요청 액션이 아닐 땐 createAction을 사용한다.
+ */
+
+// 드론 목록
+const DRONE_LIST_REQUEST = 'sample/DRONE_LIST_REQUEST';
+const DRONE_LIST_SUCCESS = 'sample/DRONE_LIST_SUCCESS';
+const DRONE_LIST_FAILURE = 'sample/DRONE_LIST_FAILURE';
+
+// 지도 타입
+const DISPATHC_MAPTYPE = 'sample/DISPATCH_MAPTYPE';
+
+// 비행 이력 목록
+const HISTORY_LIST_REQUEST = 'sample/HISTORY_LIST_REQUEST';
+
+// 비행 이력 상세 목록
+const HISTORY_LOG_REQUEST = 'sample/HISTORY_LOG_REQUEST';
+
+export const droneList = createAsyncAction(
+  DRONE_LIST_REQUEST,
+  DRONE_LIST_SUCCESS,
+  DRONE_LIST_FAILURE
+)();
+
+export const dispatchMapType = createAction(DISPATHC_MAPTYPE)();
+
+const actions = {
+  droneList
+};
+
+export type SampleActions = ActionType<typeof actions>;

src/modules/_sample/apis/index.ts

@@ -0,0 +1,14 @@
+import axios from '../../utils/customAxiosUtil';
+
+/**
+ * 변수명은 주어 + API로 작성한다.
+ * api는 Action 함수명과 동일하게 작성한다.
+ * 특별한 경우가 아니면 return은 즉시 해준다.
+ */
+
+export const sampleAPI = {
+  // 드론 목록 조회
+  droneList: async () => {
+    return await axios.get('api/bas/dron/list...');
+  }
+};

src/modules/_sample/index.ts

@@ -0,0 +1,5 @@
+export * from './actions';
+export * from './apis';
+export * from './models';
+export * from './reducers';
+export * from './sagas';

src/modules/_sample/models/index.ts

@@ -0,0 +1,24 @@
+/**
+ * interface는 파스칼케이스를 사용하여 작성하고 시작할 때 약자인 'I'를 붙여준다.
+ * 초기값의 경우 변수명을 initialState로 작성한다.
+ */
+
+export interface ISampleState {
+  droneList: IDroneDetail[] | undefined;
+  count: number | 0;
+}
+
+export interface IDroneDetail {
+  groupId: string;
+  arcrftSno: number;
+  arcrftHght: number;
+  arcrftLngth: number;
+  arcrftModelNm: string;
+  arcrftTypeCd: string;
+  arcrftWdth: number;
+}
+
+export const initialState: ISampleState = {
+  droneList: undefined,
+  count: 0
+};

src/modules/_sample/reducers/index.ts

@@ -0,0 +1,15 @@
+import { createReducer } from 'typesafe-actions';
+import produce from 'immer';
+
+import { ISampleState, initialState } from '../models';
+import * as Actions from '../actions';
+
+/**
+ * Reducer 함수는 카멜케이스를 사용하여 작성한다.
+ */
+
+export const sampleReducer = createReducer<ISampleState, Actions.SampleActions>(
+  initialState
+).handleAction(Actions.droneList.success, (state, action) =>
+  produce(state, draft => {})
+);

src/modules/_sample/sagas/index.ts

@@ -0,0 +1,16 @@
+import { ActionType } from 'typesafe-actions';
+import * as Actions from '../actions';
+import { takeEvery } from 'redux-saga/effects';
+
+/**
+ * saga 함수는 카멜케이스를 사용하여 Action 함수 + Saga로 통일한다.
+ */
+
+function* dronListSaga(action: ActionType<typeof Actions.droneList.request>) {
+  try {
+  } catch (error: any) {}
+}
+
+export function* sampleSaga() {
+  yield takeEvery(Actions.droneList.request, dronListSaga);
+}