Redux폴더구조 및 Redux Ducks Pattern

Lee Soyeon·2022년 3월 7일
0

redux

목록 보기
1/4

1. 리덕스 폴더구조

(cf. cmd > 해당폴더경로 > tree /a /f)

1.
src
|	index.js (createStore, Provider)
|
\---store
	|	index.js (root reducer)
    |
	\---modules
			todo.js (action, reducer, etc..)
			user.js (action, reducer, etc..)
2. ducks pattern 구조
src
|	App.tsx (BrowserRouter)
|	index.tsx (Provider)
|
+---pages
|	|	Home.tsx
|	|	Todo.tsx
|	|
\---redux
	|	create.ts (createStore, root경로의 index.tsx에 Provider와 함께 작성해도 됨)
    |
	\---modules
			auth.ts (action, reducer,)
			user.ts (action, reducer,)
			reducer.ts (또는 index.ts, root reducer, modules와 같은 위치에 놓아도 됨)



2. Redux Ducks Pattern

: 효율적인 리덕스 패턴

- 모듈 내보낼 때
액션함수: export
리듀서: export default

- action type 형식
: "파일명/리듀서명/타입명"

profile
프론트엔드 개발자가 되기 위해 공부하고 있습니다.

0개의 댓글