junh_eee(이준희)
8 months ago
1 changed files with 156 additions and 0 deletions
@ -0,0 +1,156 @@
|
||||
## REDUX NAMING |
||||
|
||||
```bash |
||||
📦 module |
||||
┣ 📂 _sample |
||||
┃┣ 📂 actions Action 타입, 함수 |
||||
┃┣ 📂 apis Api |
||||
┃┣ 📂 models interface, Type |
||||
┃┣ 📂 reducers Reducer 함수 |
||||
┃┣ 📂 sagas Saga 함수 |
||||
┃┣ 📜 index.ts |
||||
``` |
||||
|
||||
<br> |
||||
|
||||
## 📂 actions |
||||
|
||||
> Action 타입 |
||||
|
||||
- 대문자와 \_를 사용하여 상수 형태로 작성한다. |
||||
- 구분자는 소문자로 작성한다. |
||||
- 동사를 먼저 작성한다. |
||||
- 비동기 요청 액션이 아닐 땐 `CLIENT_` 로 시작한다. |
||||
> > 기본 규칙 |
||||
> |
||||
> - 목록 조회 `GET_[주체]_LIST` |
||||
> - 상세 조회 `GET_[주체]_DETAIL` |
||||
> - 생성/추가 `CREATE_[주체]` |
||||
> - 수정/변경 `UPDATE_[주체]` |
||||
> - 삭제 `DELETE_[주체]` |
||||
|
||||
> > 동사 |
||||
> |
||||
> - SET, FIND, SEND, CHECK, REGISTER ... |
||||
> > 명사 |
||||
> - LIST, DETAIL, LOG, APPROVAL ... |
||||
|
||||
```bash |
||||
// 드론 목록 |
||||
const GET_DRONE_LIST_REQUEST = 'sample/GET_DRONE_LIST_REQUEST'; |
||||
|
||||
// 지도 타입 |
||||
const CLIENT_MAPTYPE = 'sample/CLIENT_MAPTYPE'; |
||||
``` |
||||
|
||||
<br> |
||||
|
||||
> Action 함수 |
||||
- 카멜케이스를 사용하여 작성한다. |
||||
- 작성한 Action 타입을 참고하여 작성한다. |
||||
|
||||
```bash |
||||
export const getDroneList = createAsyncAction( |
||||
GET_DRONE_LIST_REQUEST, |
||||
GET_DRONE_LIST_SUCCESS, |
||||
GET_DRONE_LIST_FAILURE |
||||
)(); |
||||
|
||||
export const clientMapType = createAction(CLIENT_MAPTYPE)(); |
||||
``` |
||||
|
||||
<br> |
||||
|
||||
## 📂 apis |
||||
|
||||
- 변수명은 [주체] + API로 작성한다. |
||||
- api는 Action 함수명과 동일하게 작성한다. |
||||
- 특별한 경우가 아니면 return은 즉시 해준다. |
||||
|
||||
```bash |
||||
export const sampleAPI = { |
||||
getDroneList: async () => { |
||||
return await axios.get('api/bas/dron/list....'); |
||||
} |
||||
} |
||||
``` |
||||
|
||||
<br> |
||||
|
||||
## 📂 models |
||||
|
||||
- 모든 interface는 파스칼케이스를 사용하돼, 약자인 I를 붙여서 작성한다. |
||||
- Rq, Rs interface의 경우 I + Action명 + Rq or Rs로 작성한다. |
||||
- 초기값의 경우 변수명을 init + [주체]로 작성한다. |
||||
- 초기값의 interface는 State로 끝나도록 작성한다. |
||||
|
||||
```bash |
||||
export const initSample: ISampleState = { |
||||
droneList: undefined, |
||||
droneCount: 0 |
||||
} |
||||
|
||||
export interface ISampleState { |
||||
droneList: IDrone[] | undefined; |
||||
droneCount: number | 0; |
||||
} |
||||
|
||||
export interface IDrone { |
||||
groupId: string; |
||||
arcrftSno: number; |
||||
.... |
||||
} |
||||
|
||||
export interface IUpdateDroneRq { |
||||
... |
||||
} |
||||
``` |
||||
|
||||
<br> |
||||
|
||||
## 📂 reducers |
||||
|
||||
- Reducer 함수는 카멜케이스를 사용하여 [주체] + Reducer 로 작성한다. |
||||
|
||||
```bash |
||||
export const sampleReducer = createReducer<ISampleState, Actions.SampleActions>( |
||||
initSample |
||||
).handleAction(Actions.getDroneList.success, (state, action) => |
||||
produce(state, draft => {}) |
||||
); |
||||
``` |
||||
|
||||
<br> |
||||
|
||||
## 📂 sagas |
||||
|
||||
- Saga 함수는 카멜케이스를 사용하여 Action 함수 + Saga 로 작성한다. |
||||
|
||||
```bash |
||||
function* getDroneListSaga( |
||||
action: ActionType<typeof Actions.getDroneList.request> |
||||
) { |
||||
try { |
||||
} catch (error: any) {} |
||||
} |
||||
``` |
||||
|
||||
- export 함수는 카멜케이스를 사용하여 [주체] + Saga 로 작성한다. |
||||
|
||||
```bash |
||||
export function* sampleSaga() { |
||||
yield takeEvery(Actions.getDroneList.request, getDroneListSaga); |
||||
} |
||||
``` |
||||
|
||||
<br> |
||||
|
||||
## 📜 index |
||||
|
||||
```bash |
||||
export * from './actions'; |
||||
export * from './apis'; |
||||
export * from './models'; |
||||
export * from './reducers'; |
||||
export * from './sagas'; |
||||
``` |
Loading…
Reference in new issue